├── src
    ├── index.css
    ├── assets
    │   └── logo.png
    ├── composer.js
    ├── components
    │   ├── ApplicationLog.vue
    │   ├── MoralisLogin.vue
    │   ├── AvatarList.vue
    │   └── AvatarGenerator.vue
    ├── moralis.js
    ├── main.js
    └── App.vue
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── postcss.config.js
├── .env
├── tailwind.config.js
├── .gitignore
├── vue.config.js
├── hardhat.config.js
├── LICENSE
├── package.json
└── README.md


/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alkavan/moralis-vue-template/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alkavan/moralis-vue-template/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_MORALIS_APP_ID="APP_ID"
2 | VUE_APP_MORALIS_KEY="APP_KEY"
3 | VUE_APP_MOLARIS_SERVER_URL="https://server-url:2053/server"
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     './src/**/*.{vue,js,ts,jsx,tsx}',
 4 |   ],
 5 |   theme: {
 6 |     container: {
 7 |       center: true,
 8 |     },
 9 |     extend: {},
10 |   },
11 |   variants: {
12 |     extend: {},
13 |   },
14 |   plugins: [],
15 | }
16 | 


--------------------------------------------------------------------------------
/src/composer.js:
--------------------------------------------------------------------------------
 1 | const MoralisCompose = (function(moralis) {
 2 |     class Avatar extends moralis.Object {
 3 |         constructor() {
 4 |             super('Avatar');
 5 |         }
 6 |     }
 7 | 
 8 |     return {
 9 |         Avatar: Avatar
10 |     }
11 | });
12 | 
13 | export default MoralisCompose;
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('@vue/cli-service')
 2 | const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 3 | module.exports = defineConfig({
 4 |   transpileDependencies: true,
 5 |   configureWebpack: {
 6 |     plugins: [new NodePolyfillPlugin()],
 7 |     optimization: {
 8 |       splitChunks: {
 9 |         chunks: "all",
10 |       },
11 |     },
12 |   },
13 | });
14 | 


--------------------------------------------------------------------------------
/src/components/ApplicationLog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="application-log">
 3 |         <pre v-for="message in log" v-bind:key="message">{{ message }}</pre>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |     name: "ApplicationLog",
10 |     data() {
11 |         return {
12 |             log: []
13 |         }
14 |     },
15 |     mounted() {
16 |         this.emitter.on("add-log", message => {
17 |             this.log.push(message);
18 |         });
19 |     }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | 
25 | </style>
26 | 


--------------------------------------------------------------------------------
/hardhat.config.js:
--------------------------------------------------------------------------------
 1 | require("@nomiclabs/hardhat-waffle");
 2 | 
 3 | // This is a sample Hardhat task. To learn how to create your own go to
 4 | // https://hardhat.org/guides/create-task.html
 5 | task("accounts", "Prints the list of accounts", async () => {
 6 |   const accounts = await ethers.getSigners();
 7 | 
 8 |   for (const account of accounts) {
 9 |     console.log(account.address);
10 |   }
11 | });
12 | 
13 | // You need to export an object to set up your config
14 | // Go to https://hardhat.org/config/ to learn more
15 | 
16 | /**
17 |  * @type import('hardhat/config').HardhatUserConfig
18 |  */
19 | module.exports = {
20 |   solidity: "0.7.3",
21 | };
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/moralis.js:
--------------------------------------------------------------------------------
 1 | const MORALIS_APP_ID = process.env.VUE_APP_MORALIS_APP_ID;
 2 | const MORALIS_KEY = process.env.VUE_APP_MORALIS_KEY;
 3 | const MOLARIS_SERVER_URL = process.env.VUE_APP_MOLARIS_SERVER_URL;
 4 | 
 5 | const MoralisFactory = (function() {
 6 |     const Moralis = require('moralis');
 7 | 
 8 |     function MoralisInstance(applicationId, javascriptKey, url) {
 9 |         Moralis.initialize(
10 |             applicationId,
11 |             javascriptKey,
12 |         );
13 | 
14 |         Moralis.serverURL = url;
15 | 
16 |         return Moralis;
17 |     }
18 | 
19 |     let instance = null;
20 | 
21 |     return {
22 |         getInstance: function() {
23 |             if (instance == null) {
24 |                 instance = MoralisInstance(MORALIS_APP_ID, MORALIS_KEY, MOLARIS_SERVER_URL);
25 |                 instance.constructor = null;
26 |             }
27 |             return instance;
28 |         },
29 |     };
30 | })();
31 | 
32 | export default MoralisFactory;
33 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import {createApp} from 'vue'
 2 | import App from './App.vue'
 3 | import mitt from 'mitt';
 4 | import './index.css'
 5 | 
 6 | import MoralisFactory from './moralis'
 7 | import MoralisCompose from './composer'
 8 | 
 9 | import Avatars from '@dicebear/avatars';
10 | import SpriteCollection from '@dicebear/avatars-bottts-sprites';
11 | 
12 | const app = createApp(App)
13 | 
14 | app.provide('event-bus', mitt())
15 | app.provide('moralis', MoralisFactory.getInstance())
16 | 
17 | const avatars = new Avatars(SpriteCollection);
18 | app.provide('avatars', avatars)
19 | 
20 | // Here we provide a way for all components to access moralis
21 | app.mixin({
22 |     inject: {
23 |         moralis: {
24 |             from: 'moralis'
25 |         },
26 |         emitter: {
27 |             from: 'event-bus'
28 |         },
29 |     },
30 |     methods: {
31 |         moralisCompose(molaris) {
32 |             return MoralisCompose(molaris);
33 |         }
34 |     }
35 | });
36 | 
37 | app.mount('#app');
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License Copyright (c) 2021 Igal Alkon
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is furnished
 8 | to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice (including the next
11 | paragraph) shall be included in all copies or substantial portions of the
12 | Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
16 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
17 | OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
18 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
19 | OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <!--    <div class="container pt-5">-->
 3 |     <div class="container flex justify-center items-start flex-col items-center pt-5">
 4 |         <h1 class="text-2xl mb-3">Moralis Vue Project Template</h1>
 5 |         <div class="grid grid-cols-12 gap-0 w-1/2">
 6 |             <div class="col-span-4">
 7 |                 <moralis-login></moralis-login>
 8 |                 <avatar-list></avatar-list>
 9 |             </div>
10 |             <div class="col-span-8">
11 |                 <avatar-generator></avatar-generator>
12 |             </div>
13 |             <div class="col-span-full">
14 |                 <h2 class="text-xl mt-3">Application Log</h2>
15 |                 <application-log></application-log>
16 |             </div>
17 |         </div>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 | import MoralisLogin from "@/components/MoralisLogin";
23 | import ApplicationLog from "@/components/ApplicationLog";
24 | import AvatarGenerator from "@/components/AvatarGenerator";
25 | import AvatarList from "@/components/AvatarList";
26 | 
27 | export default {
28 |     name: 'App',
29 |     components: {
30 |         AvatarList,
31 |         AvatarGenerator,
32 |         MoralisLogin,
33 |         ApplicationLog,
34 |     }
35 | }
36 | </script>
37 | 
38 | <style>
39 | #app {
40 |     -webkit-font-smoothing: antialiased;
41 |     -moz-osx-font-smoothing: grayscale;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/MoralisLogin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="currentUser">Connected ... {{currentUser.id}}</div>
 3 |     <div>
 4 |         <button class="bg-blue-500 p-2" @click="doLogin" v-if="!currentUser">Login</button>
 5 |         <button class="bg-yellow-500 p-2" @click="doLogout" v-if="currentUser">Logout</button>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |     name: "MoralisLogin",
12 |     data: function () {
13 |         return {
14 |             currentUser: null
15 |         }
16 |     },
17 |     beforeMount() {
18 |         this.currentUser = this.moralis.User.current();
19 |     },
20 |     methods: {
21 |         async doLogin() {
22 |             try {
23 |                 let user = await this.moralis.Web3.authenticate();
24 |                 this.currentUser = user;
25 |                 this.emitter.emit('user-login', user);
26 |                 this.emitter.emit('add-log', `user ${user.id} logged in`);
27 |             } catch (error) {
28 |                 console.log(error);
29 |             }
30 |         },
31 | 
32 |         doLogout() {
33 |             if(!this.currentUser) {
34 |                 return;
35 |             }
36 | 
37 |             let userId = this.currentUser.id;
38 |             this.moralis.User.logOut().then(() => {
39 |                 this.currentUser = this.moralis.User.current();  // this will now be null
40 |                 this.emitter.emit('user-logout');
41 |                 this.emitter.emit('add-log', `user ${userId} logged out`);
42 |             });
43 |         }
44 |     }
45 | }
46 | </script>
47 | 
48 | <style scoped>
49 | 
50 | </style>
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "moralis-vue-template",
 3 |   "version": "1.1.0",
 4 |   "private": false,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "hardhat-node": "npx hardhat node"
10 |   },
11 |   "dependencies": {
12 |     "core-js": "^3.8.3",
13 |     "jquery": "^3.6.0",
14 |     "mitt": "^2.1.0",
15 |     "moralis": "^0.0.184",
16 |     "@walletconnect/web3-provider": "^1.8.0",
17 |     "autoprefixer": "^9.8",
18 |     "postcss": "^8.4",
19 |     "tailwindcss": "^3.1",
20 |     "vue": "^3.2",
21 |     "@dicebear/avatars": "^4.5.4",
22 |     "@dicebear/avatars-bottts-sprites": "^4.5.4"
23 |   },
24 |   "devDependencies": {
25 |     "@babel/core": "^7.12",
26 |     "@babel/eslint-parser": "^7.12",
27 |     "@nomiclabs/hardhat-ethers": "^2.1",
28 |     "@nomiclabs/hardhat-waffle": "^2.0",
29 |     "@vue/cli-plugin-babel": "^5.0",
30 |     "@vue/cli-plugin-eslint": "^5.0",
31 |     "@vue/cli-service": "^5.0",
32 |     "chai": "^4.3.4",
33 |     "eslint": "^7.32.0",
34 |     "eslint-plugin-vue": "^8.0",
35 |     "ethereum-waffle": "^3.3",
36 |     "ethers": "^5.7",
37 |     "node-polyfill-webpack-plugin": "^2.0",
38 |     "hardhat": "^2.10"
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/vue3-essential",
47 |       "eslint:recommended"
48 |     ],
49 |     "parserOptions": {
50 |       "parser": "@babel/eslint-parser"
51 |     },
52 |     "rules": {}
53 |   },
54 |   "browserslist": [
55 |     "> 1%",
56 |     "last 2 versions",
57 |     "not dead"
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/src/components/AvatarList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h2 class="text-xl my-3">Generated Avatars</h2>
 4 |         <ul>
 5 |             <li v-for="avatar in avatars" v-bind:key="avatar.id" class="cursor-pointer bg-blue-100 p-2 hover:bg-blue-200" @click.stop="avatarClick">
 6 |                 <span v-html="avatar.get('svg')" class="inline-block align-middle" style="width: 32px; height: 32px;"></span>&nbsp;
 7 |                 <span class="align-middle">{{avatar.id}}</span>
 8 |             </li>
 9 |         </ul>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 | import $ from 'jquery'
15 | 
16 | export default {
17 |     name: "AvatarList",
18 |     data: function() {
19 |         return {
20 |             avatars: [],
21 |         }
22 |     },
23 |     beforeMount() {
24 |         this.emitter.on("avatar-saved", (avatar) => {
25 |             this.avatars.push(avatar)
26 |         })
27 | 
28 |         this.emitter.on("user-login", (user) => {
29 |             this.fetchAvatars(user)
30 |         })
31 | 
32 |         this.emitter.on("user-logout", () => {
33 |             this.avatars = []
34 |         })
35 |     },
36 |     mounted() {
37 |         let user = this.moralis.User.current()
38 |         if(user) {
39 |             this.fetchAvatars(user)
40 |         }
41 |     },
42 |     methods: {
43 |         async queryAvatars(user) {
44 |             const Avatar = this.moralisCompose(this.moralis).Avatar
45 |             const query = new this.moralis.Query(Avatar)
46 |             query.equalTo("owner", user)
47 |             return await query.find()
48 |         },
49 |         fetchAvatars(user) {
50 |             this.queryAvatars(user).then((avatars) => {
51 |                 this.avatars = avatars
52 |             })
53 |         },
54 |         avatarClick(event) {
55 |             console.log(event.target)
56 |             let svg = $(event.target).find('svg').first()
57 |             this.emitter.emit('avatar-clicked', svg.html())
58 |         }
59 |     }
60 | }
61 | </script>
62 | 
63 | <style scoped>
64 | 
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/components/AvatarGenerator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="flex justify-center items-center flex-col">
 4 |             <div class="py-2">
 5 |                 <label for="seedInput" class="inline-block mr-1">Seed:</label>
 6 |                 <input v-model="seed" type="text" id="seedInput" class="border p-1">
 7 |             </div>
 8 |             <div>
 9 |                 <button class="bg-blue-500 p-2" @click="newAvatar">Generate Avatar</button>
10 |                 <button class="bg-green-500 p-2 ml-2" @click="saveAvatar" :disabled="!user">Save Avatar</button>
11 |             </div>
12 |         </div>
13 |         <div v-if="svg">
14 |             <h2 class="text-2xl font-bold text-center my-3">Avatar</h2>
15 |             <div v-html="svg"></div>
16 |         </div>
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |     name: "AvatarGenerator",
23 |     inject: {
24 |         avatars: {
25 |             from: "avatars"
26 |         }
27 |     },
28 |     data: function () {
29 |         return {
30 |             avatar: null,
31 |             seed: "HackThePlanet",
32 |             user: this.moralis.User.current(),
33 |             svg: null,
34 |         }
35 |     },
36 |     mounted() {
37 |         this.emitter.on("user-login", (user) => {
38 |             this.user = user
39 |         })
40 | 
41 |         this.emitter.on("user-logout", () => {
42 |             this.user = null
43 |             this.avatar = null
44 |             this.svg = null
45 |         })
46 | 
47 |         this.emitter.on("avatar-clicked", (svg) => {
48 |             this.avatar = null
49 |             this.svg = `<svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" fill="none">${svg}</svg>`
50 | 
51 |         })
52 |     },
53 |     methods: {
54 |         newAvatar() {
55 |             if(this.seed.length === 0) {
56 |                 this.emitter.emit('add-log', `Unable to generate avatar, seed is empty!`)
57 |                 return
58 |             }
59 | 
60 |             const svg = this.avatars.create(this.seed);
61 |             const Avatar = this.moralisCompose(this.moralis).Avatar
62 |             let avatar = new Avatar()
63 |             avatar.set('owner', this.user)
64 |             avatar.set('svg',  svg)
65 |             this.avatar = avatar
66 |             this.svg = svg
67 |         },
68 | 
69 |         saveAvatar() {
70 |             if(this.avatar.id) {
71 |                 this.emitter.emit('add-log', `This avatar already been saved and has ID: ${this.avatar.id}`)
72 |                 return
73 |             }
74 |             this.avatar.save(null, {cascadeSave: false}).then((avatar) => {
75 |                 this.emitter.emit('avatar-saved', avatar)
76 |                 this.emitter.emit('add-log', `New avatar created with ID: ${avatar.id}`)
77 |             })
78 |         },
79 |     }
80 | }
81 | </script>
82 | 
83 | <style scoped>
84 | 
85 | </style>
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Moralis Application Template for Vue.js and TailwindCSS
 2 | 
 3 | This is a basic [Vue.js](https://vuejs.org/) v3 template
 4 | for the [Moralis](https://moralis.io/) web3 application development platform.
 5 | 
 6 | ## Components
 7 | This project utilizes libraries and tools that are quite useful
 8 | when developing web and blockchain applications.
 9 | 
10 | * [Moralis](https://moralis.io/) v0.0.184
11 | * [Hardhat](https://hardhat.org/) used a local development environment for Ethereum.
12 | * [Vue.js](https://vuejs.org/) v3.2 used as frontend application framework.
13 | * [tailwindcss](https://tailwindcss.com/) v3.1 used as CSS framework.
14 | * [mitt](https://www.npmjs.com/package/mitt) is used a global event bus for Vue.
15 | 
16 | **This template was built and tested on Node v16**
17 | 
18 | ## Update v1.1 (Aug 25, 2022)
19 |  * Updated packages and frameworks:
20 |    * Moralis to v0.0.184
21 |    * Vue to v3.2
22 |    * Tailwind to v3.1
23 |  * Updated related packages and dependencies.
24 |  * Updated `vue.config.js` and `tailwind.config.js` for new versions.
25 | 
26 | ## Install Instruction
27 | Install packages
28 | ```
29 | npm install
30 | ```
31 | 
32 | To run the Hardhat development server in node mode:
33 | ```
34 | npm run hardhat-node
35 | ```
36 | 
37 | To start the web application:
38 | ```
39 | npm run serve
40 | ```
41 | 
42 | The `dotenv` package is used to load environment variables from `.env` files.
43 | The package comes as a dependency of Vue. You don't want to commit your secret variables
44 | by mistake, so I recommend doing this:
45 | ```
46 | cp .env .env.local
47 | ```
48 | Then update your variables in `.env.local` it has higher priority than the `.env` file.
49 | The `.env.local` file will also be ignored by git.
50 | 
51 | The moralis instance in injected into the Vue application globally using `mixin()`.
52 | So it will be available for all components automatically and accessed with `this.moralis`.
53 | 
54 | The `mitt` based global event bus is also available in similar manner via `this.emitter`.
55 | 
56 | Remember that Vue also have its own event system,
57 | and you should use the global event bus only for scenarios when two unrelated
58 | components need to share state, or for non-vue objects.
59 | 
60 | On another note, you might be asking wtf is `composer.js`?
61 | well that's just a place to store moralis object definitions outside the Vue application.
62 | I don't feel comfortable placing this logic inside the components files.
63 | However, I'm also not very happy with the current situation,
64 | and you're welcome to make suggestions via pull requests on github.
65 | 
66 | I included `MoralisLogin` component as example for login/logout logic.
67 | This package is published under the [MIT](https://en.wikipedia.org/wiki/MIT_License) license,
68 | however contribution of more Moralis based components is more than welcome!
69 | 
70 | The `@dicebear/avatars` and `@dicebear/avatars-bottts-sprites` packages are used only for this example
71 | application and are probably not really needed for you. You can just remove them:
72 | ```
73 | npm remove @dicebear/avatars @dicebear/avatars-bottts-sprites
74 | ```
75 | 
76 | Also, the `AvatarGenerator.vue`, `AvatarList.vue` component files and their usage in `App.vue`.
77 | 
78 | 


--------------------------------------------------------------------------------