├── .browserslistrc
├── .editorconfig
├── .env.development
├── .env.production
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── api
    │   ├── mock
    │   │   ├── data
    │   │   │   └── posts.json
    │   │   └── index.js
    │   └── server
    │   │   └── index.js
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
    │   ├── About.vue
    │   └── Home.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | VUE_APP_API_CLIENT = 'mock'


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
1 | VUE_APP_API_CLIENT = 'server'


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Source code for [How to Use Mock Data in Vue Apps](https://tahazsh.com/use-mock-data-in-vue) tutorial
2 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli-3-mock-data",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.18.0",
12 |     "vue": "^2.5.21",
13 |     "vue-router": "^3.0.1",
14 |     "vuex": "^3.0.1"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^3.3.0",
18 |     "@vue/cli-plugin-eslint": "^3.3.0",
19 |     "@vue/cli-service": "^3.3.0",
20 |     "@vue/eslint-config-standard": "^4.0.0",
21 |     "babel-eslint": "^10.0.1",
22 |     "eslint": "^5.8.0",
23 |     "eslint-plugin-vue": "^5.0.0",
24 |     "stylus": "^0.54.5",
25 |     "stylus-loader": "^3.0.2",
26 |     "vue-template-compiler": "^2.5.21"
27 |   }
28 | }
29 | 


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TahaSh/use-mock-data-in-vue/bc1ff8014568e03fb00708c0bb5572c34fc7c466/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 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>vue-cli-3-mock-data</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-cli-3-mock-data 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/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | <style lang="stylus">
 7 | #app
 8 |   font-family 'Avenir', Helvetica, Arial, sans-serif
 9 |   -webkit-font-smoothing antialiased
10 |   -moz-osx-font-smoothing grayscale
11 |   text-align center
12 |   color #2c3e50
13 | 
14 | #nav
15 |   padding 30px
16 |   a
17 |     font-weight bold
18 |     color #2c3e50
19 |     &.router-link-exact-active
20 |       color #42b983
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/api/mock/data/posts.json:
--------------------------------------------------------------------------------
1 | [
2 |   { "title": "Post Title 1" },
3 |   { "title": "Post Title 2" },
4 |   { "title": "Post Title 3" },
5 |   { "title": "Post Title 4" },
6 |   { "title": "Post Title 5" }
7 | ]


--------------------------------------------------------------------------------
/src/api/mock/index.js:
--------------------------------------------------------------------------------
 1 | import posts from './data/posts'
 2 | 
 3 | const fetch = (mockData, time = 0) => {
 4 |   return new Promise((resolve) => {
 5 |     setTimeout(() => {
 6 |       resolve(mockData)
 7 |     }, time)
 8 |   })
 9 | }
10 | 
11 | export default {
12 |   fetchPosts () {
13 |     return fetch(posts, 1000) // wait 1s before returning posts
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/api/server/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 |   fetchPosts () {
 5 |     return axios
 6 |       .get('https://jsonplaceholder.typicode.com/posts')
 7 |       .then(response => response.data)
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TahaSh/use-mock-data-in-vue/bc1ff8014568e03fb00708c0bb5572c34fc7c466/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped lang="stylus">
44 | h3
45 |   margin 40px 0 0
46 | 
47 | ul
48 |   list-style-type none
49 |   padding 0
50 | 
51 | li
52 |   display inline-block
53 |   margin 0 10px
54 | 
55 | a
56 |   color #42b983
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   router,
10 |   store,
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'home',
12 |       component: Home
13 |     },
14 |     {
15 |       path: '/about',
16 |       name: 'about',
17 |       // route level code-splitting
18 |       // this generates a separate chunk (about.[hash].js) for this route
19 |       // which is lazy-loaded when the route is visited.
20 |       component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
21 |     }
22 |   ]
23 | })
24 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import client from 'api-client'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |   state: {
 9 |     posts: []
10 |   },
11 | 
12 |   mutations: {
13 |     setPosts (state, posts) {
14 |       state.posts = posts
15 |     }
16 |   },
17 | 
18 |   actions: {
19 |     fetchPosts ({ commit }) {
20 |       return client
21 |         .fetchPosts()
22 |         .then(posts => commit('setPosts', posts))
23 |     }
24 |   }
25 | })
26 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <span v-if="loading">Loading…</span>
 4 |     <ul
 5 |       v-else
 6 |       class="posts"
 7 |     >
 8 |       <li
 9 |         v-for="post in posts"
10 |         :key="post.title"
11 |         class="post-item"
12 |       >
13 |           <h1>{{ post.title }}</h1>
14 |       </li>
15 |     </ul>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   data () {
22 |     return {
23 |       loading: false
24 |     }
25 |   },
26 | 
27 |   computed: {
28 |     posts () {
29 |       return this.$store.state.posts
30 |     }
31 |   },
32 | 
33 |   created () {
34 |     this.loading = true
35 |     this.$store.dispatch('fetchPosts')
36 |       .then(posts => {
37 |         this.loading = false
38 |       })
39 |   }
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .posts {
45 |   list-style: none;
46 |   text-align: left;
47 | }
48 | 
49 | .post-item + .post-item {
50 |   border-top: 1px solid rgba(0, 0, 0, 0.1);
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   chainWebpack: config => {
 5 |     const apiClient = process.env.VUE_APP_API_CLIENT // mock or server
 6 |     config.resolve.alias
 7 |       .set('api-client', path.resolve(__dirname, `src/api/${apiClient}`))
 8 |   }
 9 | }
10 | 


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