├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .prettierrc.json
├── README.md
├── babel.config.js
├── jest.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        └── Users.vue
    ├── main.js
    ├── mocks
        └── products.json
    ├── router
        └── index.js
    ├── server.js
    ├── store
        └── index.js
    └── views
        ├── About.vue
        └── Home.vue


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "@vue/prettier"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
10 |   },
11 |   parserOptions: {
12 |     parser: "babel-eslint"
13 |   },
14 |   overrides: [
15 |     {
16 |       files: [
17 |         "**/__tests__/*.{j,t}s?(x)",
18 |         "**/tests/unit/**/*.spec.{j,t}s?(x)"
19 |       ],
20 |       env: {
21 |         jest: true
22 |       }
23 |     }
24 |   ]
25 | };
26 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "all",
4 |   "printWidth": 100
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Screencast Mirage JS
 2 | 
 3 | Assista ao screencast: [https://youtu.be/TtHhIAQ6T-c](https://youtu.be/TtHhIAQ6T-c)
 4 | 
 5 | Download do video: [https://www.dropbox.com/s/bwxwho2qprrlxiv/Mirage%20JS-%20uma%20api%20dentro%20do%20seu%20projeto%20front%20end.mp4.zip?dl=0](https://www.dropbox.com/s/bwxwho2qprrlxiv/Mirage%20JS-%20uma%20api%20dentro%20do%20seu%20projeto%20front%20end.mp4.zip?dl=0)
 6 | 
 7 | ## Project setup
 8 | 
 9 | ```
10 | npm install
11 | ```
12 | 
13 | ### Compiles and hot-reloads for development
14 | 
15 | ```
16 | npm run serve
17 | ```
18 | 
19 | ### Compiles and minifies for production
20 | 
21 | ```
22 | npm run build
23 | ```
24 | 
25 | ### Run your unit tests
26 | 
27 | ```
28 | npm run test:unit
29 | ```
30 | 
31 | ### Lints and fixes files
32 | 
33 | ```
34 | npm run lint
35 | ```
36 | 
37 | ### Customize configuration
38 | 
39 | See [Configuration Reference](https://cli.vuejs.org/config/).
40 | 


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


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest"
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "miragejs-rehearsal-second",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.19.2",
13 |     "core-js": "^3.4.4",
14 |     "vue": "^2.6.10",
15 |     "vue-router": "^3.1.3",
16 |     "vuex": "^3.1.2"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^4.1.0",
20 |     "@vue/cli-plugin-eslint": "^4.1.0",
21 |     "@vue/cli-plugin-router": "^4.1.0",
22 |     "@vue/cli-plugin-unit-jest": "^4.1.0",
23 |     "@vue/cli-plugin-vuex": "^4.1.0",
24 |     "@vue/cli-service": "^4.1.0",
25 |     "@vue/eslint-config-prettier": "^5.0.0",
26 |     "@vue/test-utils": "1.0.0-beta.29",
27 |     "babel-eslint": "^10.0.3",
28 |     "eslint": "^5.16.0",
29 |     "eslint-plugin-prettier": "^3.1.1",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "faker": "^4.1.0",
32 |     "miragejs": "^0.1.33",
33 |     "node-sass": "^4.12.0",
34 |     "prettier": "^1.19.1",
35 |     "sass-loader": "^8.0.0",
36 |     "vue-template-compiler": "^2.6.10"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vedovelli/screencast-miragejs/c2bc377d24800fd45a051d769d70d9ab8b11ad94/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>miragejs-rehearsal-second</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but miragejs-rehearsal-second 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 |     <div id="nav">
 4 |       <router-link to="/">Users</router-link>|
 5 |       <router-link to="/about">About</router-link>
 6 |     </div>
 7 |     <router-view />
 8 |   </div>
 9 | </template>
10 | 
11 | <style lang="scss">
12 | #app {
13 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | 
20 | #nav {
21 |   padding: 30px;
22 | 
23 |   a {
24 |     font-weight: bold;
25 |     color: #2c3e50;
26 | 
27 |     &.router-link-exact-active {
28 |       color: #42b983;
29 |     }
30 |   }
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vedovelli/screencast-miragejs/c2bc377d24800fd45a051d769d70d9ab8b11ad94/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Users.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>Users</h1>
 4 |     <div>
 5 |       <h3 v-if="error">{{ error }}</h3>
 6 |       <p v-else v-for="user in users" :key="user.id">
 7 |         <strong>{{ user.name }}</strong>
 8 |         <br />
 9 |         <em>{{ user.email }}</em>
10 |         <br />
11 |         Active: {{ user.active }}
12 |       </p>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import axios from 'axios';
19 | export default {
20 |   name: 'Users',
21 |   data() {
22 |     return {
23 |       error: null,
24 |       users: [],
25 |       products: [],
26 |     };
27 |   },
28 |   mounted() {
29 |     axios
30 |       .get('api/users')
31 |       .then(res => {
32 |         this.users = res.data.users;
33 |       })
34 |       .catch(error => (this.error = error.response.data));
35 | 
36 |     axios.get('api/products').then(res => {
37 |       this.products = res.data.products;
38 |     });
39 |   },
40 | };
41 | </script>
42 | 
43 | <style scoped lang="scss">
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 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/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 | import { makeServer } from './server';
 6 | 
 7 | Vue.config.productionTip = false;
 8 | 
 9 | if (process.env.NODE_ENV === 'development') {
10 |   makeServer();
11 | }
12 | 
13 | new Vue({
14 |   router,
15 |   store,
16 |   render: h => h(App),
17 | }).$mount('#app');
18 | 


--------------------------------------------------------------------------------
/src/mocks/products.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": 1,
 4 |     "title": "Javascript coffee mug",
 5 |     "price": 3.5
 6 |   },
 7 |   {
 8 |     "id": 2,
 9 |     "title": "Javascript T-shirt",
10 |     "price": 35
11 |   },
12 |   {
13 |     "id": 3,
14 |     "title": "Javascript stickersm(10 units)",
15 |     "price": 5.5
16 |   }
17 | ]
18 | 


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


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | import { Server, Model, Factory, Response } from 'miragejs';
 2 | import faker from 'faker';
 3 | import products from './mocks/products.json';
 4 | 
 5 | export function makeServer(environment = 'development') {
 6 |   return new Server({
 7 |     environment,
 8 | 
 9 |     models: {
10 |       user: Model,
11 |       product: Model,
12 |     },
13 | 
14 |     factories: {
15 |       user: Factory.extend({
16 |         name() {
17 |           return faker.fake('{{name.findName}}');
18 |         },
19 |         email() {
20 |           return faker.fake('{{internet.email}}');
21 |         },
22 |         active() {
23 |           return faker.fake('{{random.boolean}}');
24 |         },
25 |       }),
26 |     },
27 | 
28 |     fixtures: {
29 |       products,
30 |     },
31 | 
32 |     seeds(server) {
33 |       server.loadFixtures();
34 |       server.createList('user', 5);
35 |     },
36 | 
37 |     routes() {
38 |       this.namespace = 'api';
39 |       this.get('users', () => {
40 |         return new Response(500, {}, 'O servidor morreu volte outro dia!');
41 |       });
42 |       this.resource('products');
43 |     },
44 |   });
45 | }
46 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {},
10 |   modules: {}
11 | });
12 | 


--------------------------------------------------------------------------------
/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 |     <Users />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | import Users from '@/components/Users.vue';
10 | 
11 | export default {
12 |   name: 'home',
13 |   components: {
14 |     Users,
15 |   },
16 | };
17 | </script>
18 | 


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