├── .editorconfig
├── .gitignore
├── README.md
├── api
    └── auth.js
├── assets
    ├── README.md
    └── logo.png
├── components
    ├── Logo.vue
    ├── README.md
    └── StaffDirectory.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── index.vue
    ├── login.vue
    └── users
    │   ├── _id.vue
    │   └── index.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    └── favicon.ico
├── store
    ├── README.md
    └── index.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Jump Start Vue.js - Chapter 8 Demo
 2 | 
 3 | This example builds upon everything covered in the book. It uses the concepts learned to create a Nuxt.js app with a Vuex store and authentication that fetches data from a remote API and displays it in a custom component, linking to a detail page for each item.
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 | 
14 | # build for production and launch server
15 | $ npm run build
16 | $ npm start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
23 | 


--------------------------------------------------------------------------------
/api/auth.js:
--------------------------------------------------------------------------------
  1 | import express from 'express'
  2 | import bodyParser from 'body-parser'
  3 | import cookieParser from 'cookie-parser'
  4 | import jwt from 'express-jwt'
  5 | import jsonwebtoken from 'jsonwebtoken'
  6 | 
  7 | // Create app
  8 | const app = express()
  9 | 
 10 | // Install middleware
 11 | app.use(cookieParser())
 12 | app.use(bodyParser.json())
 13 | 
 14 | // JWT middleware
 15 | app.use(
 16 |   jwt({
 17 |     secret: 'dummy',
 18 |     algorithms: ['sha1', 'RS256', 'HS256']
 19 |   }).unless({
 20 |     path: ['/api/auth/login', '/api/auth/refresh']
 21 |   })
 22 | )
 23 | 
 24 | // Refresh tokens
 25 | const refreshTokens = {}
 26 | 
 27 | // -- Routes --
 28 | 
 29 | // [POST] /login
 30 | app.post('/login', (req, res) => {
 31 |   const { username, password } = req.body
 32 |   const valid = username.length && password === '123'
 33 |   const expiresIn = 15
 34 |   const refreshToken =
 35 |     Math.floor(Math.random() * (1000000000000000 - 1 + 1)) + 1
 36 | 
 37 |   if (!valid) {
 38 |     throw new Error('Invalid username or password')
 39 |   }
 40 | 
 41 |   const accessToken = jsonwebtoken.sign(
 42 |     {
 43 |       username,
 44 |       picture: 'https://github.com/nuxt.png',
 45 |       name: 'User ' + username,
 46 |       scope: ['test', 'user']
 47 |     },
 48 |     'dummy',
 49 |     {
 50 |       expiresIn
 51 |     }
 52 |   )
 53 | 
 54 |   refreshTokens[refreshToken] = {
 55 |     accessToken,
 56 |     user: {
 57 |       username,
 58 |       picture: 'https://github.com/nuxt.png',
 59 |       name: 'User ' + username
 60 |     }
 61 |   }
 62 | 
 63 |   res.json({
 64 |     token: {
 65 |       accessToken,
 66 |       refreshToken
 67 |     }
 68 |   })
 69 | })
 70 | 
 71 | app.post('/refresh', (req, res) => {
 72 |   const { refreshToken } = req.body
 73 | 
 74 |   if (refreshToken in refreshTokens) {
 75 |     const user = refreshTokens[refreshToken].user
 76 |     const expiresIn = 15
 77 |     const newRefreshToken =
 78 |       Math.floor(Math.random() * (1000000000000000 - 1 + 1)) + 1
 79 |     delete refreshTokens[refreshToken]
 80 |     const accessToken = jsonwebtoken.sign(
 81 |       {
 82 |         user: user.username,
 83 |         picture: 'https://github.com/nuxt.png',
 84 |         name: 'User ' + user.username,
 85 |         scope: ['test', 'user']
 86 |       },
 87 |       'dummy',
 88 |       {
 89 |         expiresIn
 90 |       }
 91 |     )
 92 | 
 93 |     refreshTokens[newRefreshToken] = {
 94 |       accessToken,
 95 |       user
 96 |     }
 97 | 
 98 |     res.json({
 99 |       token: {
100 |         accessToken,
101 |         refreshToken: newRefreshToken
102 |       }
103 |     })
104 |   } else {
105 |     res.sendStatus(401)
106 |   }
107 | })
108 | 
109 | // [GET] /user
110 | app.get('/user', (req, res) => {
111 |   res.json({ user: req.user })
112 | })
113 | 
114 | // [POST] /logout
115 | app.post('/logout', (_req, res) => {
116 |   res.json({ status: 'OK' })
117 | })
118 | 
119 | // Error handler
120 | app.use((err, _req, res) => {
121 |   console.error(err) // eslint-disable-line no-console
122 |   res.status(401).send(err + '')
123 | })
124 | 
125 | // -- export app --
126 | export default {
127 |   path: '/api/auth',
128 |   handler: app
129 | }
130 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/jsvuejs2/6ce99fd69ee5687ec7e3cee6f8d4c7452939a2f6/assets/logo.png


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
 3 |     <path
 4 |       d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
 5 |       fill="#00C58E"
 6 |     />
 7 |     <path
 8 |       d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
 9 |       fill="#108775"
10 |     />
11 |     <path
12 |       d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
13 |       fill="#2F495E"
14 |     />
15 |   </svg>
16 | </template>
17 | 
18 | <style>
19 | .NuxtLogo {
20 |   animation: 1s appear;
21 |   margin: auto;
22 | }
23 | 
24 | @keyframes appear {
25 |   0% {
26 |     opacity: 0;
27 |   }
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/StaffDirectory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui container">
 3 |     <input
 4 |       v-model="filterBy"
 5 |       placeholder="Filter By Last Name"
 6 |     >
 7 |     <table class="ui celled table">
 8 |       <thead>
 9 |         <tr>
10 |           <th>Photo</th>
11 |           <th @click="sortBy = 'firstName'">First Name</th>
12 |           <th @click="sortBy = 'lastName'">Last Name</th>
13 |           <th @click="sortBy = 'email'">Email</th>
14 |           <th @click="sortBy = 'phone'">Phone</th>
15 |           <th @click="sortBy = 'nationality'">Nationality</th>
16 |         </tr>
17 |       </thead>
18 |       <tbody>
19 |         <tr
20 |           v-for="(employee, index) in sortedEmployees"
21 |           :key="index"
22 |           @click="$emit('select', employee)"
23 |         >
24 |           <td>
25 |             <img
26 |               :src="employee.avatar"
27 |               class="ui mini rounded image"
28 |             >
29 |           </td>
30 |           <td class="capitalize">{{ employee.firstName }}</td>
31 |           <td class="capitalize">{{ employee.lastName }}</td>
32 |           <td>{{ employee.email }}</td>
33 |           <td>{{ employee.phone }}</td>
34 |           <td>{{ employee.nationality }}</td>
35 |         </tr>
36 |       </tbody>
37 |       <tfoot>
38 |         <tr>
39 |           <th colspan="6">{{ sortedEmployees.length }} employees</th>
40 |         </tr>
41 |       </tfoot>
42 |     </table>
43 |   </div>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 |   name: 'StaffDirectory',
49 |   props: {
50 |     employees: {
51 |       type: Array,
52 |       default: () => []
53 |     }
54 |   },
55 |   data() {
56 |     return {
57 |       sortBy: 'firstName',
58 |       filterBy: ''
59 |     };
60 |   },
61 |   computed: {
62 |     sortedEmployees() {
63 |       return this.employees
64 |         .filter(employee => employee.lastName.includes(this.filterBy))
65 |         .sort((a, b) => a[this.sortBy].localeCompare(b[this.sortBy]));
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | <style scoped>
72 | h1.ui.center.header {
73 |   margin-top: 3em;
74 | }
75 | th:not(:first-child):hover,
76 | tbody tr {
77 |   cursor: pointer;
78 | }
79 | input {
80 |   padding: 3px;
81 | }
82 | .capitalize {
83 |   text-transform: capitalize;
84 | }
85 | </style>


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="ui fixed inverted menu">
 4 |       <div class="ui container">
 5 |         <a
 6 |           href="#"
 7 |           class="header item"
 8 |         >
 9 |           <img
10 |             class="logo"
11 |             src="~assets/logo.png"
12 |           >
13 |           Staff Manager
14 |         </a>
15 |         <nuxt-link
16 |           class="item"
17 |           to="/"
18 |           exact
19 |         >Home</nuxt-link>
20 |         <nuxt-link
21 |           class="item"
22 |           to="/users"
23 |         >Users</nuxt-link>
24 |       </div>
25 |       <div class="right menu">
26 |         <a
27 |           v-if="$auth.loggedIn"
28 |           class="item"
29 |           @click="$auth.logout()"
30 |         >
31 |           Logout
32 |         </a>
33 |         <nuxt-link
34 |           v-else
35 |           class="item"
36 |           to="/login"
37 |         >
38 |           Login
39 |         </nuxt-link>
40 |       </div>
41 |     </div>
42 |     <nuxt/>
43 |   </div>
44 | </template>
45 | 
46 | <style>
47 | body {
48 |   background-color: #ffffff;
49 | }
50 | 
51 | .ui.menu .item img.logo {
52 |   margin-right: 1.5em;
53 | }
54 | 
55 | .main.container {
56 |   margin-top: 7em;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Global page headers: https://go.nuxtjs.dev/config-head
 3 |   head: {
 4 |     title: 'staff-manager',
 5 |     htmlAttrs: {
 6 |       lang: 'en'
 7 |     },
 8 |     meta: [
 9 |       { charset: 'utf-8' },
10 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11 |       { hid: 'description', name: 'description', content: '' }
12 |     ],
13 |     link: [
14 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
15 |       {
16 |         rel: 'stylesheet',
17 |         type: 'text/css',
18 |         href:
19 |           'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css'
20 |       }
21 |     ]
22 |   },
23 | 
24 |   // Global CSS: https://go.nuxtjs.dev/config-css
25 |   css: [
26 |   ],
27 | 
28 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
29 |   plugins: [
30 |   ],
31 | 
32 |   // Auto import components: https://go.nuxtjs.dev/config-components
33 |   components: true,
34 | 
35 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
36 |   buildModules: [
37 |   ],
38 | 
39 |   // Modules: https://go.nuxtjs.dev/config-modules
40 |   modules: [
41 |     // https://go.nuxtjs.dev/axios
42 |     '@nuxtjs/axios',
43 |     '@nuxtjs/auth'
44 |   ],
45 | 
46 |   // Axios module configuration: https://go.nuxtjs.dev/config-axios
47 |   axios: {},
48 | 
49 |   // Build Configuration: https://go.nuxtjs.dev/config-build
50 |   build: {
51 |   },
52 | 
53 |   serverMiddleware: ['~/api/auth'],
54 | 
55 |   auth: {
56 |     strategies: {
57 |       local: {
58 |         endpoints: {
59 |           login: { propertyName: 'token.accessToken' }
60 |         }
61 |       }
62 |     }
63 |   }
64 |   
65 | }
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "staff-manager",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@nuxtjs/auth": "^4.9.1",
13 |     "@nuxtjs/axios": "^5.13.1",
14 |     "cookie-parser": "^1.4.5",
15 |     "core-js": "^3.9.1",
16 |     "express": "^4.17.1",
17 |     "express-jwt": "^6.0.0",
18 |     "nuxt": "^2.15.3"
19 |   },
20 |   "devDependencies": {}
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui main text container">
 3 |     <h1 class="ui header">Chapter 7: Tying it all Together</h1>
 4 |     <p>This example builds upon everything we've covered in the book. It uses
 5 |     what we've learned to create a Nuxt.js app with a Vuex store and authentication,
 6 |     that fetches data from a remote API and displays it in a custom component,
 7 |     linking to a detail page for each item.</p>
 8 |     <p>Go to the <nuxt-link to="/users">Users page</nuxt-link>.</p>
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui main text container">
 3 |     <div class="ui middle aligned center aligned grid">
 4 |       <div class="column">
 5 |         <h2 class="ui green image header">
 6 |           <div class="content">
 7 |             Log in to your account
 8 |           </div>
 9 |         </h2>
10 |         <form
11 |           :class="{ error }"
12 |           class="ui large form"
13 |           @submit.prevent="onSubmit"
14 |         >
15 |           <div class="ui segment">
16 |             <div class="field">
17 |               <div class="ui left icon input">
18 |                 <i class="user icon" />
19 |                 <input
20 |                   v-model="username"
21 |                   type="text"
22 |                   placeholder="Username"
23 |                 >
24 |               </div>
25 |             </div>
26 |             <div class="field">
27 |               <div class="ui left icon input">
28 |                 <i class="lock icon" />
29 |                 <input
30 |                   v-model="password"
31 |                   type="password"
32 |                   placeholder="Password"
33 |                 >
34 |               </div>
35 |             </div>
36 |             <button
37 |               type="submit"
38 |               class="ui fluid large green submit button"
39 |             >Login</button>
40 |           </div>
41 | 
42 |           <div class="ui error message">Oops, we couldn't log you in!</div>
43 | 
44 |         </form>
45 | 
46 |       </div>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script>
52 | export default {
53 |   data: () => ({
54 |     username: '',
55 |     password: '',
56 |     error: null
57 |   }),
58 |   methods: {
59 |     onSubmit() {
60 |       this.$auth
61 |         .loginWith('local', {
62 |           data: {
63 |             username: this.username,
64 |             password: this.password
65 |           }
66 |         })
67 |         .catch(e => {
68 |           this.error = true
69 |         });
70 |     }
71 |   }
72 | }
73 | </script>


--------------------------------------------------------------------------------
/pages/users/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-if="selectedEmployee"
 4 |     class="ui main text container"
 5 |   >
 6 |     <div class="ui items">
 7 |       <div class="item">
 8 |         <div class="image">
 9 |           <img :src="selectedEmployee.picture.large">
10 |         </div>
11 |         <div class="content">
12 |           <a class="header">{{ fullName }}</a>
13 |           <div class="meta">
14 |             <span>{{ selectedEmployee.email }}</span>
15 |           </div>
16 |           <div class="description">
17 |             <p>
18 |               {{ selectedEmployee.location.street }},
19 |               {{ selectedEmployee.location.city }},
20 |               {{ selectedEmployee.location.state }},
21 |               {{ selectedEmployee.location.postcode }}
22 |             </p>
23 |           </div>
24 |           <div class="extra">
25 |             {{ selectedEmployee.phone }}<br>
26 |             {{ selectedEmployee.cell }}
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import { mapState } from 'vuex'
36 | 
37 | export default {
38 |   middleware: ['auth'],
39 |   fetch({ store, params }) {
40 |     return store.dispatch('getEmployee', { id: params.id });
41 |   },
42 |   computed: {
43 |     ...mapState(['selectedEmployee']),
44 |     fullName() {
45 |       return `${this.selectedEmployee.name.first} ${
46 |         this.selectedEmployee.name.last
47 |       }`;
48 |     }
49 |   }
50 | }
51 | </script>


--------------------------------------------------------------------------------
/pages/users/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ui main text container">
 3 |     <h1 class="ui header">Users</h1>
 4 |     <StaffDirectory
 5 |       :employees="employeeList"
 6 |       @select="showDetail"
 7 |     />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { mapGetters } from 'vuex'
13 | import StaffDirectory from '~/components/StaffDirectory'
14 | 
15 | export default {
16 |   components: { StaffDirectory },
17 |   fetch: ({ store }) => {
18 |     return store.dispatch('getEmployees');
19 |   },
20 |   computed: {
21 |     ...mapGetters(['employeeList'])
22 |   },
23 |   methods: {
24 |     showDetail(employee) {
25 |       this.$router.push({
26 |         name: 'users-id',
27 |         params: { id: employee.id }
28 |       });
29 |     }
30 |   }
31 | }
32 | </script>


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/jsvuejs2/6ce99fd69ee5687ec7e3cee6f8d4c7452939a2f6/static/favicon.ico


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   employees: [],
 3 |   selectedEmployee: null
 4 | });
 5 | 
 6 | export const getters = {
 7 |   employeeList(state) {
 8 |     return state.employees.map(member => ({
 9 |       id: member.login.uuid,
10 |       firstName: member.name.first,
11 |       lastName: member.name.last,
12 |       email: member.email,
13 |       phone: member.phone,
14 |       nationality: member.nat,
15 |       avatar: member.picture.thumbnail
16 |     }));
17 |   }
18 | };
19 | 
20 | export const mutations = {
21 |   setEmployees(state, { employees }) {
22 |     state.employees = employees
23 |   },
24 | 
25 |   setSelectedEmployee(state, { employee }) {
26 |     state.selectedEmployee = employee
27 |   }
28 | };
29 | 
30 | export const actions = {
31 |   async getEmployees({ commit }) {
32 |     const { results } = await this.$axios.$get(
33 |       'https://randomuser.me/api/?nat=gb,us,au&results=10&seed=abc'
34 |     );
35 |     commit('setEmployees', { employees: results });
36 |   },
37 | 
38 |   async getEmployee({ commit, dispatch, state }, { id }) {
39 |     if (state.employees.length === 0) {
40 |       await dispatch('getEmployees');
41 |     }
42 | 
43 |     const employee = state.employees.find(user => user.login.uuid === id);
44 |     commit('setSelectedEmployee', { employee });
45 |   }
46 | };
47 | 


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