{{ ticket.title }}
27 |{{ ticket.description }}
28 |Welcome to our support center
4 |
5 | We are here to help! Please read the
3 |
7 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/chapter4-full/demo/src/Test.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
17 |
18 |
23 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
15 |
--------------------------------------------------------------------------------
/chapter4-full/movies/src/Movie.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ message }}
4 | 5 |-
7 |
- Chapter 1 8 |
- Chapter 2 - Part 1 9 |
- Chapter 2 - Part 2 10 |
- Chapter 3 11 |
6 |
7 | 
8 |
9 |
3 |
7 |
8 |
9 |
21 |
--------------------------------------------------------------------------------
/chapter7-full/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
18 |
--------------------------------------------------------------------------------
/chapter7-full/src/filters.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /**
4 | * Formats a percentage. Ex: .12 => '12%'
5 | *
6 | * @export
7 | * @param {number} value
8 | * @returns
9 | */
10 | export function percentage (value) {
11 | return `${Math.round(value * 100).toLocaleString()}%`
12 | }
13 |
14 | /**
15 | * Formats an amount of dollars using number localization. Ex: 15.05 => '$15.05'
16 | *
17 | * @export
18 | * @param {number} value
19 | * @returns
20 | */
21 | export function money (value) {
22 | return `$${value.toLocaleString()}`
23 | }
24 |
--------------------------------------------------------------------------------
/chapter7-download/src/filters.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /**
4 | * Formats a percentage. Ex: .12 => '12%'
5 | *
6 | * @export
7 | * @param {number} value
8 | * @returns
9 | */
10 | export function percentage (value) {
11 | return `${Math.round(value * 100).toLocaleString()}%`
12 | }
13 |
14 | /**
15 | * Formats an amount of dollars using number localization. Ex: 15.05 => '$15.05'
16 | *
17 | * @export
18 | * @param {number} value
19 | * @returns
20 | */
21 | export function money (value) {
22 | return `$${value.toLocaleString()}`
23 | }
24 |
--------------------------------------------------------------------------------
/chapter8-full/client/main.js:
--------------------------------------------------------------------------------
1 | import { Meteor } from 'meteor/meteor'
2 | import Vue from 'vue'
3 | import App from './components/App.vue'
4 | import VueMeteorTracker from 'vue-meteor-tracker'
5 | import router from './router'
6 | import 'vue-progress-path/dist/vue-progress-path.css'
7 | import VueProgress from 'vue-progress-path'
8 |
9 | Vue.use(VueMeteorTracker)
10 |
11 | Vue.use(VueProgress, {
12 | defaultShape: 'semicircle',
13 | })
14 |
15 | Meteor.startup(() => {
16 | new Vue({
17 | el: '#app',
18 | router,
19 | ...App,
20 | })
21 | })
22 |
--------------------------------------------------------------------------------
/chapter8-full/client/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 |
4 | import ProductionDashboard from './components/ProductionDashboard.vue'
5 | import ProductionGenerator from './components/ProductionGenerator.vue'
6 |
7 | Vue.use(VueRouter)
8 |
9 | const routes = [
10 | { path: '/', name: 'dashboard', component: ProductionDashboard },
11 | { path: '/generate', name: 'generate', component: ProductionGenerator },
12 | ]
13 |
14 | const router = new VueRouter({
15 | mode: 'history',
16 | routes,
17 | })
18 |
19 | export default router
20 |
--------------------------------------------------------------------------------
/chapter7-full/src/mixins/discount.js:
--------------------------------------------------------------------------------
1 | export default function discountMixin ({
2 | itemProp = 'item',
3 | discountProp = 'discount',
4 | priceProp = 'price',
5 | originalPriceProp = 'originalPrice',
6 | } = {}) {
7 | return {
8 | computed: {
9 | [discountProp] () {
10 | const item = this[itemProp]
11 | const price = item[priceProp]
12 | const originalPrice = item[originalPriceProp]
13 |
14 | if (originalPrice) {
15 | return 1 - price / originalPrice
16 | }
17 | return 0
18 | },
19 | },
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/chapter6-full/server/src/config.js:
--------------------------------------------------------------------------------
1 | export const PORT = process.env.PORT || 3000
2 | export const SECRET = process.env.SECRET || 'TR7_9cDZ5Re-@lT3Z1|58F'
3 | export const CLIENT_ORIGIN = process.env.CLIENT_ORIGIN || 'http://localhost:8080'
4 | export const PUBLIC_URL = process.env.PUBLIC_URL || 'http://localhost:3000'
5 | export const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID
6 | export const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET
7 | export const DB_PATH = process.env.DB_PATH || './db'
8 | export const COMPACTION_INTERVAL = process.env.COMPACTION_INTERVAL || 12 * 60 * 60 * 1000
9 |
--------------------------------------------------------------------------------
/chapter7-download/src/mixins/discount.js:
--------------------------------------------------------------------------------
1 | export default function discountMixin ({
2 | itemProp = 'item',
3 | discountProp = 'discount',
4 | priceProp = 'price',
5 | originalPriceProp = 'originalPrice',
6 | } = {}) {
7 | return {
8 | computed: {
9 | [discountProp] () {
10 | const item = this[itemProp]
11 | const price = item[priceProp]
12 | const originalPrice = item[originalPriceProp]
13 |
14 | if (originalPrice) {
15 | return 1 - price / originalPrice
16 | }
17 | return 0
18 | },
19 | },
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/PageCheckout.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
5 | {{ info }}
6 |
4 | done
5 |
6 | 7 | Your order is complete 8 |
9 |
10 | Return to home
11 |
12 |
4 | done
5 |
6 | 7 | Your order is complete 8 |
9 |
10 | Return to home
11 |
12 | This page can't be found
4 |
5 | Sorry, but we can't find the page you're looking for.
6 | It might have been moved or deleted.
7 | Check your spelling or click below to return to the homepage.
8 |
10 | Return to home
11 |
12 | This page can't be found
4 |
5 | Sorry, but we can't find the page you're looking for.
6 | It might have been moved or deleted.
7 | Check your spelling or click below to return to the homepage.
8 |
10 | Return to home
11 |
12 | This page can't be found
4 |
5 | Sorry, but we can't find the page you're looking for.
6 | It might have been moved or deleted.
7 | Check your spelling or click below to return to the homepage.
8 |
10 | Return to home
11 |
12 | This page can't be found
4 |
5 | Sorry, but we can't find the page you're looking for.
6 | It might have been moved or deleted.
7 | Check your spelling or click below to return to the homepage.
8 |
10 | Return to home
11 |
12 | -
3 |
Your Support tickets
4 | 5 | 6 | 7 |
8 | See all tickets
9 | New ticket
10 |
11 |
12 |
3 |
4 |
5 |
6 |
7 |
35 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/BaseLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
35 |
--------------------------------------------------------------------------------
/chapter8-full/client/components/ProductionGenerator.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
28 |
--------------------------------------------------------------------------------
/chapter4-full/demo/src/Movies.vue:
--------------------------------------------------------------------------------
1 |
2 | Measure production
4 | 5 |-
3 |
- 4 | {{ movie.title }} 5 | 6 |
3 |
4 | 
5 |
7 |
10 |
12 |
13 |
14 |
15 |
24 |
25 |
28 |
29 |
37 |
--------------------------------------------------------------------------------
/chapter7-full/webpack/client.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack')
2 | const merge = require('webpack-merge')
3 | const common = require('./common')
4 | const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
5 |
6 | module.exports = merge(common, {
7 | entry: './src/entry-client',
8 | plugins: [
9 | // Important: this splits the webpack runtime into a leading chunk
10 | // so that async chunks can be injected right after it.
11 | // this also enables better caching for your app/vendor code.
12 | new webpack.optimize.CommonsChunkPlugin({
13 | name: 'manifest',
14 | minChunks: Infinity,
15 | }),
16 | // Generates the client manifest file used by the renderer
17 | new VueSSRClientPlugin(),
18 | ],
19 | })
20 |
--------------------------------------------------------------------------------
/chapter1-setup/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | My shirt shop
6 |
11 |
14 |
15 |
16 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/chapter5-full/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "support-center-server",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "start": "nodemon src/index.js --exec babel-node --presets es2015,stage-0"
7 | },
8 | "author": "",
9 | "license": "ISC",
10 | "dependencies": {
11 | "babel-cli": "^6.24.1",
12 | "babel-preset-es2015": "^6.24.1",
13 | "babel-preset-stage-0": "^6.24.1",
14 | "bcrypt": "^1.0.2",
15 | "body-parser": "^1.17.2",
16 | "cookie-parser": "^1.4.3",
17 | "cors": "^2.8.3",
18 | "express": "^4.15.3",
19 | "express-session": "^1.15.3",
20 | "nedb": "^1.8.0",
21 | "nodemon": "^1.11.0",
22 | "passport": "^0.3.2",
23 | "passport-local": "^1.0.0",
24 | "uuid": "^3.0.1"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/chapter7-full/src/components/App.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ message }}
12 | 13 |
3 |
8 |
10 |
11 |
12 |
13 |
33 |
34 |
37 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
10 |
11 |
12 |
13 |
33 |
34 |
37 |
--------------------------------------------------------------------------------
/chapter3-download/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/main.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import Vue from 'vue'
3 | import AppLayout from './components/AppLayout.vue'
4 | import router from './router'
5 | import state from './state'
6 | import VueFetch, { $fetch } from './plugins/fetch'
7 | import VueState from './plugins/state'
8 | import './global-components'
9 | import * as filters from './filters'
10 |
11 | Vue.use(VueFetch, {
12 | baseUrl: 'http://localhost:3000/',
13 | })
14 |
15 | Vue.use(VueState, state)
16 |
17 | for (const key in filters) {
18 | Vue.filter(key, filters[key])
19 | }
20 |
21 | async function main () {
22 | // Get user info
23 | try {
24 | state.user = await $fetch('user')
25 | } catch (e) {
26 | console.warn(e)
27 | }
28 | // Launch app
29 | new Vue({
30 | el: '#app',
31 | data: state,
32 | router,
33 | render: h => h(AppLayout),
34 | })
35 | }
36 |
37 | main()
38 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/mixins/PersistantData.js:
--------------------------------------------------------------------------------
1 | export default function (id, fields) {
2 | return {
3 | created () {
4 | for (const field of fields) {
5 | const savedValue = localStorage.getItem(`${id}.${field}`)
6 | if (savedValue !== null) {
7 | this.$data[field] = JSON.parse(savedValue)
8 | }
9 | }
10 | },
11 |
12 | watch: fields.reduce((obj, field) => {
13 | obj[field] = function (val) {
14 | localStorage.setItem(`${id}.${field}`, JSON.stringify(val))
15 | }
16 | return obj
17 | }, {}),
18 |
19 | methods: {
20 | saveAllPersistantData () {
21 | for (const field of fields) {
22 | localStorage.setItem(`${id}.${field}`, JSON.stringify(this.$data[field]))
23 | }
24 | },
25 | },
26 |
27 | beforeDestroy () {
28 | this.saveAllPersistantData()
29 | },
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/chapter7-full/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // Use only this configuration
3 | root: true,
4 | // File parser
5 | parser: 'vue-eslint-parser',
6 | parserOptions: {
7 | // Use babel-eslint for JavaScript
8 | 'parser': 'babel-eslint',
9 | 'ecmaVersion': 2017,
10 | // With import/export syntax
11 | 'sourceType': 'module'
12 | },
13 | // Environment global objects
14 | env: {
15 | browser: true,
16 | es6: true,
17 | jest: true,
18 | },
19 | extends: [
20 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
21 | 'standard',
22 | // https://github.com/vuejs/eslint-plugin-vue#bulb-rules
23 | 'plugin:vue/recommended',
24 | ],
25 | rules: {
26 | // https://github.com/babel/babel-eslint/issues/517
27 | 'no-use-before-define': 'off',
28 | 'comma-dangle': ['error', 'always-multiline'],
29 | },
30 | }
31 |
--------------------------------------------------------------------------------
/chapter6-full/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "geolocated-blog-server",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "start": "nodemon src/index.js --exec babel-node --presets es2015,stage-0"
7 | },
8 | "author": "",
9 | "license": "ISC",
10 | "dependencies": {
11 | "babel-cli": "^6.24.1",
12 | "babel-preset-es2015": "^6.24.1",
13 | "babel-preset-stage-0": "^6.24.1",
14 | "bcrypt": "^1.0.2",
15 | "body-parser": "^1.17.2",
16 | "cookie-parser": "^1.4.3",
17 | "cors": "^2.8.3",
18 | "express": "^4.15.3",
19 | "express-session": "^1.15.3",
20 | "geolib": "^2.0.23",
21 | "nedb": "^1.8.0",
22 | "nedb-session-store": "^1.1.1",
23 | "nodemon": "^1.11.0",
24 | "passport": "^0.4.0",
25 | "passport-google-oauth": "^1.0.0",
26 | "passport.socketio": "^3.7.0",
27 | "socket.io": "^2.0.3",
28 | "uuid": "^3.0.1"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/chapter7-full/src/app.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import Vue from 'vue'
3 | import App from './components/App.vue'
4 | import { createRouter } from './router'
5 | import { createStore } from './store'
6 | import { sync } from 'vuex-router-sync'
7 | import * as filters from './filters'
8 | import './plugins'
9 | import './components'
10 | import { createI18n } from './utils/i18n'
11 |
12 | // Global filters
13 | for (const key in filters) {
14 | Vue.filter(key, filters[key])
15 | }
16 |
17 | export async function createApp (context) {
18 | const router = createRouter()
19 | const store = createStore()
20 |
21 | sync(store, router)
22 |
23 | const i18n = await createI18n(context.locale)
24 | await store.dispatch('init')
25 |
26 | const app = new Vue({
27 | router,
28 | store,
29 | i18n,
30 | ...App,
31 | })
32 |
33 | return {
34 | app,
35 | router,
36 | store,
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/main.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import Vue from 'vue'
3 | import VueFetch, { $fetch } from './plugins/fetch'
4 | import App from './components/App.vue'
5 | import router from './router'
6 | import store from './store'
7 | import { sync } from 'vuex-router-sync'
8 | import VueGoogleMaps, * as GMap from 'vue-googlemaps'
9 | import * as filters from './filters'
10 |
11 | // Filters
12 | for (const key in filters) {
13 | Vue.filter(key, filters[key])
14 | }
15 |
16 | Vue.use(VueFetch, {
17 | baseUrl: 'http://localhost:3000/',
18 | })
19 |
20 | Vue.use(VueGoogleMaps, {
21 | load: {
22 | apiKey: 'AIzaSyBl_r42YN1g-pY3DVsy_0x3k15f0-oOJeo',
23 | libraries: ['places'],
24 | },
25 | })
26 |
27 | sync(store, router)
28 |
29 | async function main () {
30 | await store.dispatch('init')
31 |
32 | new Vue({
33 | ...App,
34 | el: '#app',
35 | router,
36 | store,
37 | })
38 | }
39 |
40 | main()
41 |
--------------------------------------------------------------------------------
/chapter7-full/src/components/BaseImage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ![]()
11 |
12 |
13 |
14 |
15 |
37 |
38 |
52 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/BaseImage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ![]()
11 |
12 |
13 |
14 |
15 |
37 |
38 |
52 |
--------------------------------------------------------------------------------
/chapter4-full/demo/src/MoviesJSX.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
35 |
36 |
43 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/components/AppMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
21 |
35 |
--------------------------------------------------------------------------------
/chapter7-download/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 |
4 | import cart from './cart'
5 | import item from './item'
6 | import items from './items'
7 | import ui from './ui'
8 |
9 | Vue.use(Vuex)
10 |
11 | const store = new Vuex.Store({
12 | strict: process.env.NODE_ENV !== 'production',
13 |
14 | actions: {
15 | init () {
16 | console.log('store init')
17 | },
18 | },
19 |
20 | modules: {
21 | cart,
22 | item,
23 | items,
24 | ui,
25 | },
26 | })
27 |
28 | // Hot module replacement for the store
29 | if (module.hot) {
30 | module.hot.accept([
31 | './cart',
32 | './item',
33 | './items',
34 | './ui',
35 | ], () => {
36 | store.hotUpdate({
37 | modules: {
38 | cart: require('./cart').default,
39 | item: require('./item').default,
40 | items: require('./items').default,
41 | ui: require('./ui').default,
42 | },
43 | })
44 | })
45 | }
46 |
47 | export default store
48 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/plugins/fetch.js:
--------------------------------------------------------------------------------
1 | import store from '../store'
2 |
3 | let baseUrl
4 |
5 | export async function $fetch (url, options) {
6 | const finalOptions = Object.assign({}, {
7 | headers: {
8 | 'Content-Type': 'application/json',
9 | },
10 | credentials: 'include',
11 | }, options)
12 | const response = await fetch(`${baseUrl}${url}`, finalOptions)
13 | if (response.ok) {
14 | const data = await response.json()
15 | return data
16 | } else if (response.status === 403) {
17 | // If the session is no longer valid
18 | // We logout
19 | store.dispatch('logout')
20 | } else {
21 | const message = await response.text()
22 | const error = new Error(message)
23 | error.response = response
24 | throw error
25 | }
26 | }
27 |
28 | export default {
29 | install (Vue, options) {
30 | console.log('Installed!', options)
31 |
32 | // Plugin options
33 | baseUrl = options.baseUrl
34 |
35 | // Fetch
36 | Vue.prototype.$fetch = $fetch
37 | },
38 | }
39 |
--------------------------------------------------------------------------------
/chapter5-full/server/src/connectors/tickets.js:
--------------------------------------------------------------------------------
1 | import { Tickets } from '../providers'
2 | import * as Users from './users'
3 |
4 | async function populateUser (ticket) {
5 | ticket.user = await Users.getById(ticket.user_id)
6 | }
7 |
8 | export async function getAll ({ user }) {
9 | const tickets = await Tickets.find({
10 | user_id: user._id,
11 | })
12 | await Promise.all(
13 | tickets.map(ticket => populateUser(ticket))
14 | )
15 | tickets.sort((a, b) => b.date.getTime() - a.date.getTime())
16 | return tickets
17 | }
18 |
19 | export async function getById ({ user }, id) {
20 | const ticket = await Tickets.findOne({
21 | user_id: user._id,
22 | _id: id,
23 | })
24 | if (ticket) {
25 | await populateUser(ticket)
26 | }
27 | return ticket
28 | }
29 |
30 | export function create ({ user }, { title, description }) {
31 | return Tickets.insert({
32 | title,
33 | description,
34 | user_id: user._id,
35 | date: new Date(),
36 | comments: [],
37 | status: 'new',
38 | })
39 | }
40 |
--------------------------------------------------------------------------------
/chapter7-download/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 |
4 | import PageHome from './components/PageHome.vue'
5 | import PageStoreItem from './components/PageStoreItem.vue'
6 | import PageCheckout from './components/PageCheckout.vue'
7 | import PageNotFound from './components/PageNotFound.vue'
8 |
9 | Vue.use(VueRouter)
10 |
11 | const routes = [
12 | { path: '/', name: 'home', component: PageHome },
13 | { path: '/item/:id', name: 'store-item', component: PageStoreItem, props: route => ({ id: parseInt(route.params.id) }) },
14 | { path: '/checkout', name: 'checkout', component: PageCheckout },
15 | { path: '*', component: PageNotFound },
16 | ]
17 |
18 | const router = new VueRouter({
19 | routes,
20 | mode: 'history',
21 | scrollBehavior (to, from, savedPosition) {
22 | if (savedPosition) {
23 | return savedPosition
24 | }
25 | if (to.hash) {
26 | return { selector: to.hash }
27 | }
28 | return { x: 0, y: 0 }
29 | },
30 | })
31 |
32 | export default router
33 |
--------------------------------------------------------------------------------
/chapter4-full/movies/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "description": "Trying out Vue.js!",
4 | "version": "1.0.0",
5 | "author": "Guillaume Chau",
6 | "license": "MIT",
7 | "private": true,
8 | "scripts": {
9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 | },
12 | "dependencies": {
13 | "vue": "^2.5.8"
14 | },
15 | "browserslist": [
16 | "> 1%",
17 | "last 2 versions",
18 | "not ie <= 8"
19 | ],
20 | "devDependencies": {
21 | "babel-core": "^6.26.0",
22 | "babel-loader": "^7.1.2",
23 | "babel-polyfill": "^6.26.0",
24 | "babel-preset-env": "^1.6.0",
25 | "babel-preset-stage-3": "^6.24.1",
26 | "babel-preset-vue": "^1.2.1",
27 | "cross-env": "^5.0.5",
28 | "css-loader": "^0.28.7",
29 | "file-loader": "^1.1.4",
30 | "vue-loader": "^13.0.5",
31 | "vue-template-compiler": "^2.5.8",
32 | "webpack": "^3.6.0",
33 | "webpack-dev-server": "^2.9.1"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/chapter4-full/movies/package.json~:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "description": "Trying out Vue.js!",
4 | "version": "1.0.0",
5 | "author": "Guillaume Chau
4 | place
5 | GeoBlog
6 |
7 |
8 |
9 |
18 |
10 |
11 | ![]()
12 |
13 | {{ user.profile.displayName }}
14 |
15 | my_location
16 | power_settings_new
17 | Frequently Asked Questions
4 | 5 |
8 | Can't load the questions
9 |
10 |
11 |
3 |
9 |
10 |
11 |
47 |
--------------------------------------------------------------------------------
/chapter7-full/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 |
4 | import cart from './cart'
5 | import item from './item'
6 | import items from './items'
7 | import ui from './ui'
8 |
9 | Vue.use(Vuex)
10 |
11 | export function createStore () {
12 | const store = new Vuex.Store({
13 | strict: process.env.NODE_ENV !== 'production',
14 |
15 | actions: {
16 | init () {
17 | console.log('store init')
18 | },
19 | },
20 |
21 | modules: {
22 | cart,
23 | item,
24 | items,
25 | ui,
26 | },
27 | })
28 |
29 | // Hot module replacement for the store
30 | if (module.hot) {
31 | module.hot.accept([
32 | './cart',
33 | './item',
34 | './items',
35 | './ui',
36 | ], () => {
37 | store.hotUpdate({
38 | modules: {
39 | cart: require('./cart').default,
40 | item: require('./item').default,
41 | items: require('./items').default,
42 | ui: require('./ui').default,
43 | },
44 | })
45 | })
46 | }
47 |
48 | return store
49 | }
50 |
--------------------------------------------------------------------------------
/chapter7-full/src/entry-server.js:
--------------------------------------------------------------------------------
1 | import { createApp } from './app'
2 |
3 | export default context => {
4 | return new Promise(async (resolve, reject) => {
5 | const { app, router, store } = await createApp(context)
6 |
7 | router.push(context.url)
8 |
9 | router.onReady(() => {
10 | const matchedComponents = router.getMatchedComponents()
11 |
12 | Promise.all(matchedComponents.map(Component => {
13 | if (Component.asyncData) {
14 | return Component.asyncData({
15 | store,
16 | route: router.currentRoute,
17 | })
18 | }
19 | })).then(() => {
20 | // After all preFetch hooks are resolved, our store is now
21 | // filled with the state needed to render the app.
22 | // When we attach the state to the context, and the `template` option
23 | // is used for the renderer, the state will automatically be
24 | // serialized and injected into the HTML as `window.__INITIAL_STATE__`.
25 | context.state = store.state
26 |
27 | resolve(app)
28 | }).catch(reject)
29 | }, reject)
30 | })
31 | }
32 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/components/content/BlogContent.vue:
--------------------------------------------------------------------------------
1 |
48 |
--------------------------------------------------------------------------------
/chapter7-full/src/utils/animations.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | /**
4 | * Creates a floating image that animate from an element to a target element.
5 | *
6 | * @export
7 | * @param {object} { el, targetEl, imageUrl, imageClass }
8 | */
9 | export function flyingImage ({ el, targetEl, imageUrl, imageClass }) {
10 | if (targetEl) {
11 | const bounds = el.getBoundingClientRect()
12 | const animatedEl = document.createElement('img')
13 | animatedEl.setAttribute('src', imageUrl)
14 | animatedEl.classList.add('animation')
15 | animatedEl.classList.add('flying-image')
16 | animatedEl.classList.add(imageClass)
17 | animatedEl.style.top = `${bounds.top}px`
18 | animatedEl.style.left = `${bounds.left}px`
19 | document.body.appendChild(animatedEl)
20 | Vue.nextTick(() => {
21 | const targetBounds = targetEl.getBoundingClientRect()
22 | animatedEl.style.top = `${targetBounds.top + targetBounds.height / 2}px`
23 | animatedEl.style.left = `${targetBounds.left + targetBounds.width / 2}px`
24 | setTimeout(() => {
25 | document.body.removeChild(animatedEl)
26 | }, 500)
27 | })
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/chapter8-full/.meteor/packages:
--------------------------------------------------------------------------------
1 | # Meteor packages used by this project, one per line.
2 | # Check this file (and the other files in this directory) into your repository.
3 | #
4 | # 'meteor add' and 'meteor remove' will edit this file for you,
5 | # but you can also edit it by hand.
6 |
7 | meteor-base@1.2.0 # Packages every Meteor app needs to have
8 | mobile-experience@1.0.5 # Packages for a great mobile UX
9 | mongo@1.3.0 # The database Meteor supports right now
10 | static-html # Define static page content in .html files
11 | reactive-var@1.0.11 # Reactive variable for tracker
12 | tracker@1.1.3 # Meteor's client-side reactive programming library
13 |
14 | standard-minifier-css@1.3.5 # CSS minifier run for production mode
15 | standard-minifier-js@2.2.0 # JS minifier run for production mode
16 | es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers
17 | ecmascript@0.9.0 # Enable ECMAScript2015+ syntax in app code
18 | shell-server@0.3.0 # Server-side component of the `meteor shell` command
19 | akryum:vue-component
20 | akryum:vue-stylus
21 |
--------------------------------------------------------------------------------
/chapter7-download/src/utils/animations.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | /**
4 | * Creates a floating image that animate from an element to a target element.
5 | *
6 | * @export
7 | * @param {object} { el, targetEl, imageUrl, imageClass }
8 | */
9 | export function flyingImage ({ el, targetEl, imageUrl, imageClass }) {
10 | if (targetEl) {
11 | const bounds = el.getBoundingClientRect()
12 | const animatedEl = document.createElement('img')
13 | animatedEl.setAttribute('src', imageUrl)
14 | animatedEl.classList.add('animation')
15 | animatedEl.classList.add('flying-image')
16 | animatedEl.classList.add(imageClass)
17 | animatedEl.style.top = `${bounds.top}px`
18 | animatedEl.style.left = `${bounds.left}px`
19 | document.body.appendChild(animatedEl)
20 | Vue.nextTick(() => {
21 | const targetBounds = targetEl.getBoundingClientRect()
22 | animatedEl.style.top = `${targetBounds.top + targetBounds.height / 2}px`
23 | animatedEl.style.left = `${targetBounds.left + targetBounds.width / 2}px`
24 | setTimeout(() => {
25 | document.body.removeChild(animatedEl)
26 | }, 500)
27 | })
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/components/NavMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
32 |
33 |
40 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/components/Tickets.vue:
--------------------------------------------------------------------------------
1 |
2 | Welcome
4 | 5 |
6 |
7 |
8 |
3 |
10 |
17 |
18 |
19 |
20 |
21 |
22 |
42 |
--------------------------------------------------------------------------------
/chapter5-full/server/src/connectors/users.js:
--------------------------------------------------------------------------------
1 | import bcrypt from 'bcrypt'
2 | import { Users } from '../providers'
3 | import * as Tickets from './tickets'
4 |
5 | const SALT_ROUNDS = 10
6 |
7 | export async function getById (id) {
8 | return await Users.findOne({ _id: id })
9 | }
10 |
11 | export async function getByUsername (username) {
12 | return await Users.findOne({ username })
13 | }
14 |
15 | export async function isPasswordMatching (user, password) {
16 | return await bcrypt.compare(password, user.password)
17 | }
18 |
19 | export async function hashPassword (password) {
20 | return await bcrypt.hash(password, SALT_ROUNDS)
21 | }
22 |
23 | export async function createUser ({ username, email, password }) {
24 | const user = await getByUsername(username)
25 | if (user) {
26 | throw new Error('Duplicate username')
27 | } else {
28 | const hash = await hashPassword(password)
29 | const result = await Users.insert({
30 | username,
31 | email,
32 | password: hash,
33 | })
34 |
35 | Tickets.create({ user: result }, {
36 | title: 'Welcome',
37 | description: 'Welcome to our support center!',
38 | })
39 |
40 | return result
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/chapter6-full/server/src/auth.js:
--------------------------------------------------------------------------------
1 | import passport from 'passport'
2 | import { OAuth2Strategy as GoogleStrategy } from 'passport-google-oauth'
3 | import * as Users from './connectors/users'
4 | import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, PUBLIC_URL } from './config'
5 |
6 | passport.use(new GoogleStrategy(
7 | {
8 | clientID: GOOGLE_CLIENT_ID,
9 | clientSecret: GOOGLE_CLIENT_SECRET,
10 | callbackURL: `${PUBLIC_URL}/auth/google/callback`,
11 | },
12 | async (accessToken, refreshToken, profile, done) => {
13 | try {
14 | const user = await Users.findOrCreate({
15 | profile: {
16 | id: profile.id,
17 | displayName: profile.displayName,
18 | photos: profile.photos,
19 | },
20 | accessToken,
21 | refreshToken,
22 | })
23 | done(null, user)
24 | } catch (e) {
25 | done(e)
26 | }
27 | }
28 | ))
29 |
30 | passport.serializeUser(
31 | (user, done) => {
32 | done(null, user._id)
33 | }
34 | )
35 |
36 | passport.deserializeUser(
37 | async (id, done) => {
38 | const user = await Users.getById(id)
39 | const err = !user ? new Error('User not found') : null
40 | done(err, user || null)
41 | }
42 | )
43 |
--------------------------------------------------------------------------------
/chapter7-full/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 |
4 | import PageHome from './components/PageHome.vue'
5 | import PageStoreItem from './components/PageStoreItem.vue'
6 | import PageCheckout from './components/PageCheckout.vue'
7 | import PageLocale from './components/PageLocale.vue'
8 | import PageNotFound from './components/PageNotFound.vue'
9 |
10 | Vue.use(VueRouter)
11 |
12 | const routes = [
13 | { path: '/', name: 'home', component: PageHome },
14 | { path: '/item/:id', name: 'store-item', component: PageStoreItem, props: route => ({ id: parseInt(route.params.id) }) },
15 | { path: '/checkout', name: 'checkout', component: PageCheckout },
16 | { path: '/locale', name: 'locale', component: PageLocale },
17 | { path: '*', component: PageNotFound },
18 | ]
19 |
20 | export function createRouter () {
21 | const router = new VueRouter({
22 | routes,
23 | mode: 'history',
24 | scrollBehavior (to, from, savedPosition) {
25 | if (savedPosition) {
26 | return savedPosition
27 | }
28 | if (to.hash) {
29 | return { selector: to.hash }
30 | }
31 | return { x: 0, y: 0 }
32 | },
33 | })
34 |
35 | return router
36 | }
37 |
--------------------------------------------------------------------------------
/chapter3-full/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | You don't have any ticket yet.
7 |
8 |
9 |
11 |
12 | {{ ticket.title }}
13 | {{ ticket.status }}
14 | {{ ticket.date | date }}
15 |
16 |
3 |
14 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
53 |
--------------------------------------------------------------------------------
/chapter4-full/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "description": "Trying out Vue.js!",
4 | "version": "1.0.0",
5 | "author": "Guillaume Chau",
6 | "license": "MIT",
7 | "private": true,
8 | "scripts": {
9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 | },
12 | "dependencies": {
13 | "vue": "^2.5.8"
14 | },
15 | "browserslist": [
16 | "> 1%",
17 | "last 2 versions",
18 | "not ie <= 8"
19 | ],
20 | "devDependencies": {
21 | "babel-core": "^6.26.0",
22 | "babel-loader": "^7.1.2",
23 | "babel-polyfill": "^6.26.0",
24 | "babel-preset-env": "^1.6.0",
25 | "babel-preset-stage-3": "^6.24.1",
26 | "babel-preset-vue": "^1.2.1",
27 | "cross-env": "^5.0.5",
28 | "css-loader": "^0.28.7",
29 | "file-loader": "^1.1.4",
30 | "less": "^2.7.3",
31 | "less-loader": "^4.0.5",
32 | "node-sass": "^4.7.2",
33 | "pug": "^2.0.0-rc.4",
34 | "pug-loader": "^2.3.0",
35 | "sass-loader": "^6.0.6",
36 | "stylus": "^0.54.5",
37 | "stylus-loader": "^3.0.1",
38 | "vue-loader": "^13.0.5",
39 | "vue-template-compiler": "^2.5.8",
40 | "webpack": "^3.6.0",
41 | "webpack-dev-server": "^2.9.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/chapter3-full/svg/food-bar.svg:
--------------------------------------------------------------------------------
1 |
2 |
36 |
--------------------------------------------------------------------------------
/chapter3-download/svg/food-bar.svg:
--------------------------------------------------------------------------------
1 |
2 |
36 |
--------------------------------------------------------------------------------
/chapter3-full/svg/health-bar.svg:
--------------------------------------------------------------------------------
1 |
2 |
36 |
--------------------------------------------------------------------------------
/chapter3-download/svg/health-bar.svg:
--------------------------------------------------------------------------------
1 |
2 |
36 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import store from './store'
4 |
5 | import Login from './components/Login.vue'
6 | import GeoBlog from './components/GeoBlog.vue'
7 | import NotFound from './components/NotFound.vue'
8 |
9 | Vue.use(VueRouter)
10 |
11 | const routes = [
12 | { path: '/', name: 'home', component: GeoBlog, meta: { private: true } },
13 | { path: '/login', name: 'login', component: Login },
14 | { path: '*', component: NotFound },
15 | ]
16 |
17 | const router = new VueRouter({
18 | routes,
19 | mode: 'history',
20 | scrollBehavior (to, from, savedPosition) {
21 | if (savedPosition) {
22 | return savedPosition
23 | }
24 | if (to.hash) {
25 | return { selector: to.hash }
26 | }
27 | return { x: 0, y: 0 }
28 | },
29 | })
30 |
31 | router.beforeEach((to, from, next) => {
32 | console.log('to', to.name)
33 | const user = store.getters.user
34 | if (to.matched.some(r => r.meta.private) && !user) {
35 | next({
36 | name: 'login',
37 | params: {
38 | wantedRoute: to.fullPath,
39 | },
40 | })
41 | return
42 | }
43 | if (to.matched.some(r => r.meta.guest) && user) {
44 | next({ name: 'home' })
45 | return
46 | }
47 | next()
48 | })
49 |
50 | export default router
51 |
--------------------------------------------------------------------------------
/chapter3-full/state.js:
--------------------------------------------------------------------------------
1 | // Some usefull variables
2 | var maxHealth = 10
3 | var maxFood = 10
4 | var handSize = 5
5 | var cardUid = 0
6 | var currentPlayingCard = null
7 |
8 | // The consolidated state of our app
9 | var state = {
10 | // UI
11 | activeOverlay: null,
12 | // World
13 | worldRatio: getWorldRatio(),
14 | // Game
15 | turn: 1,
16 | players: [
17 | {
18 | name: 'Anne of Cleves',
19 | food: 10,
20 | health: 10,
21 | skipTurn: false,
22 | skippedTurn: false,
23 | hand: [],
24 | lastPlayedCardId: null,
25 | dead: false,
26 | },
27 | {
28 | name: 'William the Bald',
29 | food: 10,
30 | health: 10,
31 | skipTurn: false,
32 | skippedTurn: false,
33 | hand: [],
34 | lastPlayedCardId: null,
35 | dead: false,
36 | },
37 | ],
38 | currentPlayerIndex: Math.round(Math.random()),
39 | get currentPlayer () {
40 | return state.players[state.currentPlayerIndex]
41 | },
42 | get currentOpponentId () {
43 | return state.currentPlayerIndex === 0 ? 1 : 0
44 | },
45 | get currentOpponent () {
46 | return state.players[state.currentOpponentId]
47 | },
48 | get currentHand () {
49 | return state.currentPlayer.hand
50 | },
51 | drawPile: pile,
52 | discardPile: {},
53 | canPlay: false,
54 | }
55 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/plugins/fetch.js:
--------------------------------------------------------------------------------
1 | import state from '../state'
2 | import router from '../router'
3 |
4 | let baseUrl
5 |
6 | export async function $fetch (url, options) {
7 | const finalOptions = Object.assign({}, {
8 | headers: {
9 | 'Content-Type': 'application/json',
10 | },
11 | credentials: 'include',
12 | }, options)
13 | const response = await fetch(`${baseUrl}${url}`, finalOptions)
14 | if (response.ok) {
15 | const data = await response.json()
16 | return data
17 | } else if (response.status === 403) {
18 | // If the session is no longer valid
19 | // We logout
20 | state.user = null
21 |
22 | // If the route is private
23 | // We go to the login screen
24 | if (router.currentRoute.matched.some(r => r.meta.private)) {
25 | router.replace({ name: 'login', params: {
26 | wantedRoute: router.currentRoute.fullPath,
27 | }})
28 | }
29 | } else {
30 | const message = await response.text()
31 | const error = new Error(message)
32 | error.response = response
33 | throw error
34 | }
35 | }
36 |
37 | export default {
38 | install (Vue, options) {
39 | console.log('Installed!', options)
40 |
41 | // Plugin options
42 | baseUrl = options.baseUrl
43 |
44 | // Fetch
45 | Vue.prototype.$fetch = $fetch
46 | },
47 | }
48 |
--------------------------------------------------------------------------------
/chapter6-full/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "geolocated-blog",
3 | "version": "1.0.0",
4 | "description": "A geolocated blog web app.",
5 | "author": "Guillaume Chau",
6 | "license": "MIT",
7 | "private": true,
8 | "scripts": {
9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 | },
12 | "dependencies": {
13 | "moment": "^2.19.2",
14 | "socket.io-client": "^2.0.4",
15 | "vue": "^2.5.8",
16 | "vue-googlemaps": "^0.0.6",
17 | "vue-router": "^3.0.1",
18 | "vuex": "^3.0.1",
19 | "vuex-router-sync": "^5.0.0"
20 | },
21 | "browserslist": [
22 | "> 1%",
23 | "last 2 versions",
24 | "not ie <= 8"
25 | ],
26 | "devDependencies": {
27 | "babel-core": "^6.26.0",
28 | "babel-loader": "^7.1.2",
29 | "babel-polyfill": "^6.26.0",
30 | "babel-preset-env": "^1.6.0",
31 | "babel-preset-stage-3": "^6.24.1",
32 | "babel-preset-vue": "^1.2.1",
33 | "cross-env": "^5.0.5",
34 | "css-loader": "^0.28.7",
35 | "file-loader": "^1.1.4",
36 | "stylus": "^0.54.5",
37 | "stylus-loader": "^3.0.1",
38 | "vue-loader": "^13.0.5",
39 | "vue-template-compiler": "^2.5.8",
40 | "webpack": "^3.6.0",
41 | "webpack-dev-server": "^2.9.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/components/content/LocationInfo.vue:
--------------------------------------------------------------------------------
1 |
2 | Ticket
4 | 5 |
8 | Ticket not found.
9 |
10 |
11 |
12 |
13 |
15 | Created on {{ ticket.date | date }}
16 |
17 |
18 | Author {{ ticket.user.username }}
19 |
20 |
21 | Status {{ ticket.status }}
22 |
23 |
3 |
4 |
9 |
15 |
16 |
17 |
22 |
28 |
29 |
30 |
31 |
32 |
51 |
--------------------------------------------------------------------------------
/chapter5-download/style/mixins.styl:
--------------------------------------------------------------------------------
1 | ellipsis() {
2 | overflow: hidden;
3 | -ms-text-overflow: ellipsis;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | bounds($distance) {
9 | top: $distance;
10 | bottom: $distance;
11 | right: $distance;
12 | left: $distance;
13 | }
14 |
15 | overlay() {
16 | position: absolute;
17 | bounds(0);
18 | }
19 |
20 | flex-box() {
21 | display: flex;
22 |
23 | & > * {
24 | flex: auto 0 0;
25 | }
26 | }
27 |
28 | h-box() {
29 | flex-box();
30 | flex-direction: row;
31 | }
32 |
33 | v-box() {
34 | flex-box();
35 | flex-direction: column;
36 | }
37 |
38 | flex-control() {
39 | width: 0 !important;
40 | }
41 |
42 | box-center() {
43 | align-items: center;
44 | justify-content: center;
45 | }
46 |
47 | toolbar-btn($bg) {
48 | background: fade($bg, 80%);
49 | color: black;
50 | transition: background 0.2s;
51 |
52 | &:hover {
53 | color: black;
54 | background: $bg;
55 | }
56 | }
57 |
58 | space-between-x($margin) {
59 | margin-right: $margin;
60 |
61 | &:last-child {
62 | margin-right: 0;
63 | }
64 | }
65 |
66 | space-between-y($margin) {
67 | margin-bottom: $margin;
68 |
69 | &:last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 |
74 | unselectable() {
75 | -moz-user-select: none;
76 | -webkit-user-select: none;
77 | -ms-user-select: none;
78 | user-select: none;
79 | }
80 |
--------------------------------------------------------------------------------
/chapter6-download/styles/mixins.styl:
--------------------------------------------------------------------------------
1 | ellipsis() {
2 | overflow: hidden;
3 | -ms-text-overflow: ellipsis;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | bounds($distance) {
9 | top: $distance;
10 | bottom: $distance;
11 | right: $distance;
12 | left: $distance;
13 | }
14 |
15 | overlay() {
16 | position: absolute;
17 | bounds(0);
18 | }
19 |
20 | flex-box() {
21 | display: flex;
22 |
23 | & > * {
24 | flex: auto 0 0;
25 | }
26 | }
27 |
28 | h-box() {
29 | flex-box();
30 | flex-direction: row;
31 | }
32 |
33 | v-box() {
34 | flex-box();
35 | flex-direction: column;
36 | }
37 |
38 | flex-control() {
39 | width: 0 !important;
40 | }
41 |
42 | box-center() {
43 | align-items: center;
44 | justify-content: center;
45 | }
46 |
47 | toolbar-btn($bg) {
48 | background: fade($bg, 80%);
49 | color: black;
50 | transition: background 0.2s;
51 |
52 | &:hover {
53 | color: black;
54 | background: $bg;
55 | }
56 | }
57 |
58 | space-between-x($margin) {
59 | margin-right: $margin;
60 |
61 | &:last-child {
62 | margin-right: 0;
63 | }
64 | }
65 |
66 | space-between-y($margin) {
67 | margin-bottom: $margin;
68 |
69 | &:last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 |
74 | unselectable() {
75 | -moz-user-select: none;
76 | -webkit-user-select: none;
77 | -ms-user-select: none;
78 | user-select: none;
79 | }
80 |
--------------------------------------------------------------------------------
/chapter7-full/src/styles/mixins.styl:
--------------------------------------------------------------------------------
1 | ellipsis() {
2 | overflow: hidden;
3 | -ms-text-overflow: ellipsis;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | bounds($distance) {
9 | top: $distance;
10 | bottom: $distance;
11 | right: $distance;
12 | left: $distance;
13 | }
14 |
15 | overlay() {
16 | position: absolute;
17 | bounds(0);
18 | }
19 |
20 | flex-box() {
21 | display: flex;
22 |
23 | & > * {
24 | flex: auto 0 0;
25 | }
26 | }
27 |
28 | h-box() {
29 | flex-box();
30 | flex-direction: row;
31 | }
32 |
33 | v-box() {
34 | flex-box();
35 | flex-direction: column;
36 | }
37 |
38 | flex-control() {
39 | width: 0 !important;
40 | }
41 |
42 | box-center() {
43 | align-items: center;
44 | justify-content: center;
45 | }
46 |
47 | toolbar-btn($bg) {
48 | background: fade($bg, 80%);
49 | color: black;
50 | transition: background 0.2s;
51 |
52 | &:hover {
53 | color: black;
54 | background: $bg;
55 | }
56 | }
57 |
58 | space-between-x($margin) {
59 | margin-right: $margin;
60 |
61 | &:last-child {
62 | margin-right: 0;
63 | }
64 | }
65 |
66 | space-between-y($margin) {
67 | margin-bottom: $margin;
68 |
69 | &:last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 |
74 | unselectable() {
75 | -moz-user-select: none;
76 | -webkit-user-select: none;
77 | -ms-user-select: none;
78 | user-select: none;
79 | }
80 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/style/mixins.styl:
--------------------------------------------------------------------------------
1 | ellipsis() {
2 | overflow: hidden;
3 | -ms-text-overflow: ellipsis;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | bounds($distance) {
9 | top: $distance;
10 | bottom: $distance;
11 | right: $distance;
12 | left: $distance;
13 | }
14 |
15 | overlay() {
16 | position: absolute;
17 | bounds(0);
18 | }
19 |
20 | flex-box() {
21 | display: flex;
22 |
23 | & > * {
24 | flex: auto 0 0;
25 | }
26 | }
27 |
28 | h-box() {
29 | flex-box();
30 | flex-direction: row;
31 | }
32 |
33 | v-box() {
34 | flex-box();
35 | flex-direction: column;
36 | }
37 |
38 | flex-control() {
39 | width: 0 !important;
40 | }
41 |
42 | box-center() {
43 | align-items: center;
44 | justify-content: center;
45 | }
46 |
47 | toolbar-btn($bg) {
48 | background: fade($bg, 80%);
49 | color: black;
50 | transition: background 0.2s;
51 |
52 | &:hover {
53 | color: black;
54 | background: $bg;
55 | }
56 | }
57 |
58 | space-between-x($margin) {
59 | margin-right: $margin;
60 |
61 | &:last-child {
62 | margin-right: 0;
63 | }
64 | }
65 |
66 | space-between-y($margin) {
67 | margin-bottom: $margin;
68 |
69 | &:last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 |
74 | unselectable() {
75 | -moz-user-select: none;
76 | -webkit-user-select: none;
77 | -ms-user-select: none;
78 | user-select: none;
79 | }
80 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/styles/mixins.styl:
--------------------------------------------------------------------------------
1 | ellipsis() {
2 | overflow: hidden;
3 | -ms-text-overflow: ellipsis;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | bounds($distance) {
9 | top: $distance;
10 | bottom: $distance;
11 | right: $distance;
12 | left: $distance;
13 | }
14 |
15 | overlay() {
16 | position: absolute;
17 | bounds(0);
18 | }
19 |
20 | flex-box() {
21 | display: flex;
22 |
23 | & > * {
24 | flex: auto 0 0;
25 | }
26 | }
27 |
28 | h-box() {
29 | flex-box();
30 | flex-direction: row;
31 | }
32 |
33 | v-box() {
34 | flex-box();
35 | flex-direction: column;
36 | }
37 |
38 | flex-control() {
39 | width: 0 !important;
40 | }
41 |
42 | box-center() {
43 | align-items: center;
44 | justify-content: center;
45 | }
46 |
47 | toolbar-btn($bg) {
48 | background: fade($bg, 80%);
49 | color: black;
50 | transition: background 0.2s;
51 |
52 | &:hover {
53 | color: black;
54 | background: $bg;
55 | }
56 | }
57 |
58 | space-between-x($margin) {
59 | margin-right: $margin;
60 |
61 | &:last-child {
62 | margin-right: 0;
63 | }
64 | }
65 |
66 | space-between-y($margin) {
67 | margin-bottom: $margin;
68 |
69 | &:last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 |
74 | unselectable() {
75 | -moz-user-select: none;
76 | -webkit-user-select: none;
77 | -ms-user-select: none;
78 | user-select: none;
79 | }
80 |
--------------------------------------------------------------------------------
/chapter7-download/src/styles/mixins.styl:
--------------------------------------------------------------------------------
1 | ellipsis() {
2 | overflow: hidden;
3 | -ms-text-overflow: ellipsis;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 |
8 | bounds($distance) {
9 | top: $distance;
10 | bottom: $distance;
11 | right: $distance;
12 | left: $distance;
13 | }
14 |
15 | overlay() {
16 | position: absolute;
17 | bounds(0);
18 | }
19 |
20 | flex-box() {
21 | display: flex;
22 |
23 | & > * {
24 | flex: auto 0 0;
25 | }
26 | }
27 |
28 | h-box() {
29 | flex-box();
30 | flex-direction: row;
31 | }
32 |
33 | v-box() {
34 | flex-box();
35 | flex-direction: column;
36 | }
37 |
38 | flex-control() {
39 | width: 0 !important;
40 | }
41 |
42 | box-center() {
43 | align-items: center;
44 | justify-content: center;
45 | }
46 |
47 | toolbar-btn($bg) {
48 | background: fade($bg, 80%);
49 | color: black;
50 | transition: background 0.2s;
51 |
52 | &:hover {
53 | color: black;
54 | background: $bg;
55 | }
56 | }
57 |
58 | space-between-x($margin) {
59 | margin-right: $margin;
60 |
61 | &:last-child {
62 | margin-right: 0;
63 | }
64 | }
65 |
66 | space-between-y($margin) {
67 | margin-bottom: $margin;
68 |
69 | &:last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 |
74 | unselectable() {
75 | -moz-user-select: none;
76 | -webkit-user-select: none;
77 | -ms-user-select: none;
78 | user-select: none;
79 | }
80 |
--------------------------------------------------------------------------------
/chapter7-full/src/store/items.js:
--------------------------------------------------------------------------------
1 | import http from '../utils/http'
2 |
3 | export default {
4 | namespaced: true,
5 |
6 | state () {
7 | return {
8 | items: [],
9 | loading: false,
10 | searchText: '',
11 | }
12 | },
13 |
14 | getters: {
15 | items: state => {
16 | if (state.searchText) {
17 | const reg = new RegExp(state.searchText.trim().toLowerCase().replace(/\s+/g, '|'))
18 | return state.items.filter(
19 | item => item.title.toLowerCase().search(reg) !== -1
20 | )
21 | } else {
22 | return state.items
23 | }
24 | },
25 | itemsMap: state => state.items.reduce((obj, item) => {
26 | obj[item.id] = item
27 | return obj
28 | }, {}),
29 | loading: state => state.loading,
30 | searchText: state => state.searchText,
31 | },
32 |
33 | mutations: {
34 | items (state, value) {
35 | state.items = value
36 | },
37 | loading (state, value) {
38 | state.loading = value
39 | },
40 | searchText (state, value) {
41 | state.searchText = value
42 | },
43 | },
44 |
45 | actions: {
46 | async fetchItems ({ commit }) {
47 | commit('loading', true)
48 | const result = await http.get('items')
49 | commit('items', result.data)
50 | commit('loading', false)
51 | },
52 |
53 | setSearchText ({ commit }, value) {
54 | commit('searchText', value)
55 | },
56 | },
57 | }
58 |
--------------------------------------------------------------------------------
/chapter7-download/src/store/items.js:
--------------------------------------------------------------------------------
1 | import http from '../utils/http'
2 |
3 | export default {
4 | namespaced: true,
5 |
6 | state () {
7 | return {
8 | items: [],
9 | loading: false,
10 | searchText: '',
11 | }
12 | },
13 |
14 | getters: {
15 | items: state => {
16 | if (state.searchText) {
17 | const reg = new RegExp(state.searchText.trim().toLowerCase().replace(/\s+/g, '|'))
18 | return state.items.filter(
19 | item => item.title.toLowerCase().search(reg) !== -1
20 | )
21 | } else {
22 | return state.items
23 | }
24 | },
25 | itemsMap: state => state.items.reduce((obj, item) => {
26 | obj[item.id] = item
27 | return obj
28 | }, {}),
29 | loading: state => state.loading,
30 | searchText: state => state.searchText,
31 | },
32 |
33 | mutations: {
34 | items (state, value) {
35 | state.items = value
36 | },
37 | loading (state, value) {
38 | state.loading = value
39 | },
40 | searchText (state, value) {
41 | state.searchText = value
42 | },
43 | },
44 |
45 | actions: {
46 | async fetchItems ({ commit }) {
47 | commit('loading', true)
48 | const result = await http.get('items')
49 | commit('items', result.data)
50 | commit('loading', false)
51 | },
52 |
53 | setSearchText ({ commit }, value) {
54 | commit('searchText', value)
55 | },
56 | },
57 | }
58 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/PageHome.vue:
--------------------------------------------------------------------------------
1 |
2 |
14 |
21 |
14 |
21 |
9 |
16 |
17 |
27 | Nothing in the cart yet
10 |
9 |
16 |
17 |
27 | Nothing in the cart yet
10 |
10 |
34 | {{ $t('change-lang') }}
11 |
12 |
25 |
33 |
17 |
21 | {{ $t(`lang.${lang}`) }}
22 |
23 |
24 |
10 |
34 | {{ $t('change-lang') }}
11 |
12 |
25 |
33 |
17 |
21 | {{ $t(`lang.${lang}`) }}
22 |
23 |
24 |
3 |
13 |
14 |
15 |
39 |
40 |
83 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/StoreItemInfos.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ item.title }}
4 |
5 | {{ item.originalPrice | money }}
6 | -{{ discount | percentage }}
7 |
8 | {{ item.price | money }}
9 |
12 |
3 |
13 |
14 |
15 |
39 |
40 |
83 |
--------------------------------------------------------------------------------
/chapter4-full/demo/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------
/chapter4-full/movies/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------
/chapter5-full/client/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------
/chapter6-full/client/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------
/chapter6-full/server/src/index.js:
--------------------------------------------------------------------------------
1 | import cookieParser from 'cookie-parser'
2 | import bodyParser from 'body-parser'
3 | import express from 'express'
4 | import passport from 'passport'
5 | import session from 'express-session'
6 | import cors from 'cors'
7 | import uuid from 'uuid/v4'
8 | import http from 'http'
9 | import SocketIo from 'socket.io'
10 | import socket from './socket'
11 | import NedbStore from 'nedb-session-store'
12 | import path from 'path'
13 | import PassportSocketIo from 'passport.socketio'
14 |
15 | import './auth'
16 |
17 | import routes from './routes'
18 |
19 | import { CLIENT_ORIGIN, SECRET, PORT, DB_PATH } from './config'
20 |
21 | const corsOptions = {
22 | origin: CLIENT_ORIGIN,
23 | credentials: true,
24 | }
25 |
26 | const NedbSessionStore = NedbStore(session)
27 | const sessionStore = new NedbSessionStore({
28 | filename: path.join(DB_PATH, 'session-store.db')
29 | })
30 |
31 | const app = express()
32 | const server = http.Server(app)
33 |
34 | app.use(cors(corsOptions))
35 |
36 | app.use(cookieParser(SECRET))
37 |
38 | app.use(bodyParser.urlencoded({ extended: true }))
39 | app.use(bodyParser.json())
40 |
41 | app.use(session({
42 | genid: () => uuid(),
43 | key: 'express.sid',
44 | secret: SECRET,
45 | resave: true,
46 | saveUninitialized: true,
47 | cookie: {
48 | maxAge: 3 * 60 * 60 * 1000,
49 | secure: process.env.NODE_ENV === 'production',
50 | },
51 | store: sessionStore,
52 | }))
53 |
54 | app.use(passport.initialize())
55 | app.use(passport.session())
56 |
57 |
58 | routes(app)
59 |
60 | server.listen(PORT, () => {
61 | console.log(`Server listening on port ${PORT}`)
62 | })
63 |
64 | const io = SocketIo(server)
65 |
66 | io.use(PassportSocketIo.authorize({
67 | cookieParser,
68 | key: 'express.sid',
69 | secret: SECRET,
70 | store: sessionStore,
71 | success: (data, accept) => {
72 | console.log('socket.io auth success')
73 | accept()
74 | },
75 | }))
76 |
77 | socket(io)
78 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import state from './state'
4 |
5 | import Home from './components/Home.vue'
6 | import FAQ from './components/FAQ.vue'
7 | import Login from './components/Login.vue'
8 | import TicketsLayout from './components/TicketsLayout.vue'
9 | import Tickets from './components/Tickets.vue'
10 | import NewTicket from './components/NewTicket.vue'
11 | import Ticket from './components/Ticket.vue'
12 | import NotFound from './components/NotFound.vue'
13 |
14 | Vue.use(VueRouter)
15 |
16 | const routes = [
17 | { path: '/', name: 'home', component: Home },
18 | { path: '/faq', name: 'faq', component: FAQ },
19 | { path: '/login', name: 'login', component: Login, meta: { guest: true } },
20 | { path: '/tickets', component: TicketsLayout, meta: { private: true }, children: [
21 | { path: '', name: 'tickets', component: Tickets },
22 | { path: 'new', name: 'new-ticket', component: NewTicket },
23 | { path: ':id', name: 'ticket', component: Ticket, props: true },
24 | ] },
25 | { path: '*', component: NotFound },
26 | ]
27 |
28 | const router = new VueRouter({
29 | routes,
30 | mode: 'history',
31 | scrollBehavior (to, from, savedPosition) {
32 | if (savedPosition) {
33 | return savedPosition
34 | }
35 | if (to.hash) {
36 | return { selector: to.hash }
37 | }
38 | return { x: 0, y: 0 }
39 | },
40 | })
41 |
42 | router.beforeEach((to, from, next) => {
43 | console.log('to', to.name)
44 | // if (to.meta.private && !state.user) {
45 | if (to.matched.some(r => r.meta.private) && !state.user) {
46 | next({
47 | name: 'login',
48 | params: {
49 | wantedRoute: to.fullPath,
50 | },
51 | })
52 | return
53 | }
54 | // if (to.meta.guest && state.user) {
55 | if (to.matched.some(r => r.meta.guest) && state.user) {
56 | next({ name: 'home' })
57 | return
58 | }
59 | next()
60 | })
61 |
62 | export default router
63 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import { $fetch } from '../plugins/fetch'
4 | import router from '../router'
5 |
6 | import maps from './maps'
7 | import posts from './posts'
8 |
9 | Vue.use(Vuex)
10 |
11 | const store = new Vuex.Store({
12 | strict: process.env.NODE_ENV !== 'production',
13 |
14 | state () {
15 | return {
16 | user: null,
17 | }
18 | },
19 |
20 | getters: {
21 | user: state => state.user,
22 |
23 | userPicture: (state, getters) => {
24 | const user = getters.user
25 | if (user) {
26 | const photos = user.profile.photos
27 | if (photos.length !== 0) {
28 | return photos[0].value
29 | }
30 | }
31 | },
32 | },
33 |
34 | mutations: {
35 | user: (state, user) => {
36 | state.user = user
37 | },
38 | },
39 |
40 | actions: {
41 | async init ({ dispatch }) {
42 | await dispatch('login')
43 | },
44 |
45 | async login ({ commit, dispatch }) {
46 | try {
47 | const user = await $fetch('user')
48 | console.log('user', user)
49 | commit('user', user)
50 |
51 | if (user) {
52 | // Redirect to the wanted route or home
53 | router.replace(router.currentRoute.params.wantedRoute || { name: 'home' })
54 |
55 | dispatch('logged-in')
56 | }
57 | } catch (e) {
58 | console.warn(e)
59 | }
60 | },
61 |
62 | logout ({ commit, dispatch }) {
63 | commit('user', null)
64 |
65 | $fetch('logout')
66 |
67 | // If the route is private
68 | // We go to the login screen
69 | if (router.currentRoute.matched.some(r => r.meta.private)) {
70 | router.replace({ name: 'login', params: {
71 | wantedRoute: router.currentRoute.fullPath,
72 | }})
73 | }
74 | },
75 | },
76 |
77 | modules: {
78 | maps,
79 | posts,
80 | },
81 | })
82 |
83 | export default store
84 |
--------------------------------------------------------------------------------
/chapter6-full/client/src/components/content/CreatePost.vue:
--------------------------------------------------------------------------------
1 |
2 |
33 |
34 |
35 |
94 |
--------------------------------------------------------------------------------
/chapter8-full/client/components/ProductionDashboard.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ item.title }}
4 |
5 | {{ item.originalPrice | money }}
6 | -{{ discount | percentage }}
7 |
8 | {{ item.price | money }}
9 |
12 |
3 |
6 |
18 |
19 |
20 |
29 |
30 |
31 |
32 |
84 |
85 |
--------------------------------------------------------------------------------
/chapter3-full/svg/card-separator.svg:
--------------------------------------------------------------------------------
1 |
2 |
55 |
--------------------------------------------------------------------------------
/chapter3-download/svg/card-separator.svg:
--------------------------------------------------------------------------------
1 |
2 |
55 |
--------------------------------------------------------------------------------
/chapter5-full/client/src/components/NewTicket.vue:
--------------------------------------------------------------------------------
1 |
2 | Production Dashboard
4 | 5 |
24 |
28 | {{ item.date.toLocaleString() }}
25 | {{ item.error ? 'Error' : '' }}
26 | {{ item.value }}
27 |
3 |
8 |
28 | Go back
29 |
30 |
35 |
36 |
37 |
38 |
39 |
40 |
50 |
51 |
90 |
--------------------------------------------------------------------------------
/chapter7-download/src/components/BasePane.vue:
--------------------------------------------------------------------------------
1 |
2 | New ticket
4 |
3 |
4 |
28 |
29 |
30 |
50 |
51 |
102 |
--------------------------------------------------------------------------------
/chapter7-full/src/components/BasePane.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
27 |
6 |
20 |
7 |
12 | {{ title }}
13 |
14 |
21 |
23 |
26 |
3 |
4 |
28 |
29 |
30 |
50 |
51 |
102 |
--------------------------------------------------------------------------------
/chapter3-full/svg/turn.svg:
--------------------------------------------------------------------------------
1 |
2 |
51 |
--------------------------------------------------------------------------------
/chapter3-download/svg/turn.svg:
--------------------------------------------------------------------------------
1 |
2 |
51 |
--------------------------------------------------------------------------------
5 |
27 |
6 |
20 |
7 |
12 | {{ title }}
13 |
14 |
21 |
23 |
26 |