├── README.md ├── animation-2.html ├── animation.html ├── app └── my-app │ ├── .babelrc │ ├── .eslintrc.js │ ├── .gitignore │ ├── .postcssrc.js │ ├── cypress.json │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ ├── router.js │ ├── store.js │ └── views │ │ ├── About.vue │ │ └── Home.vue │ ├── tests │ ├── e2e │ │ ├── .eslintrc │ │ ├── plugins │ │ │ └── index.js │ │ ├── specs │ │ │ └── test.js │ │ └── support │ │ │ ├── commands.js │ │ │ └── index.js │ └── unit │ │ ├── .eslintrc.js │ │ └── HelloWorld.spec.js │ └── vue.config.js ├── class-binding.html ├── comp-event.html ├── comp-prop-set.html ├── comp-prop.html ├── comp-props.html ├── comp-scop-slots.html ├── comp-slots.html ├── comp1.html ├── custom-directive.html ├── dynamic-comp.html ├── ecommerce-store ├── .editorconfig ├── .gitignore ├── README.md ├── api │ └── index.js ├── assets │ ├── README.md │ └── style │ │ ├── app.styl │ │ └── variables.styl ├── components │ ├── README.md │ └── game.vue ├── layouts │ ├── README.md │ ├── default.vue │ └── error.vue ├── middleware │ ├── README.md │ └── authenticated.js ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ ├── README.md │ ├── checkout.vue │ ├── index.vue │ ├── product │ │ └── _id.vue │ └── secret.vue ├── plugins │ ├── README.md │ ├── firebase.js │ └── vuetify.js ├── server │ └── index.js ├── static │ ├── README.md │ ├── favicon.ico │ └── v.png └── store │ ├── README.md │ └── index.js ├── expressions.html ├── if-else-adv.html ├── if-else.html ├── index.html ├── lifeycle.html ├── methods-adv.html ├── methods.html ├── mixin.html ├── movies.json ├── render.html ├── router-app └── router-app │ ├── .gitignore │ ├── .postcssrc.js │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── main.js │ ├── router.js │ └── views │ ├── About.vue │ ├── Home.vue │ ├── Me.vue │ └── UserProfile.vue ├── test-example ├── my-test-cypress │ ├── .gitignore │ ├── .postcssrc.js │ ├── babel.config.js │ ├── cypress.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── tests │ │ └── e2e │ │ ├── plugins │ │ └── index.js │ │ ├── specs │ │ └── test.js │ │ └── support │ │ ├── commands.js │ │ └── index.js └── my-test-jest-example │ ├── .gitignore │ ├── .postcssrc.js │ ├── babel.config.js │ ├── jest.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ ├── router.js │ └── views │ │ ├── About.vue │ │ └── Home.vue │ ├── tests │ └── unit │ │ └── HelloWorld.spec.js │ └── wallaby.js ├── v-bind-v-show.html ├── v-for.html ├── v-model.html └── watcher.html /README.md: -------------------------------------------------------------------------------- 1 | # Create Awesome Vue.js Apps With Nuxt.js Repo! 2 | 3 | Please use this repo to grab the latest code for the course! 4 | 5 | 6 | https://programwitherik.usefedora.com/ 7 | -------------------------------------------------------------------------------- /animation-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animation Basics 2 9 | 10 | 43 | 44 | 45 | 46 |
47 |
48 | 49 |

{{message}}

50 | 51 |
52 |
53 | 54 |
55 |
56 | 57 | 58 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animation Basics 9 | 10 | 33 | 34 | 35 | 36 |
37 |
38 | 39 |

{{message}}

40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 | 48 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /app/my-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@vue/app" 4 | ] 5 | } -------------------------------------------------------------------------------- /app/my-app/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 'extends': [ 4 | 'plugin:vue/essential', 5 | '@vue/prettier' 6 | ] 7 | } -------------------------------------------------------------------------------- /app/my-app/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /app/my-app/.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /app/my-app/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /app/my-app/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ["js", "jsx", "json", "vue"], 3 | transform: { 4 | "^.+\\.vue$": "vue-jest", 5 | ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": 6 | "jest-transform-stub", 7 | "^.+\\.jsx?$": "babel-jest" 8 | }, 9 | moduleNameMapper: { 10 | "^@/(.*)$": "/src/$1" 11 | }, 12 | snapshotSerializers: ["jest-serializer-vue"], 13 | testMatch: [ 14 | "/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))" 15 | ] 16 | }; 17 | -------------------------------------------------------------------------------- /app/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test": "vue-cli-service test", 9 | "e2e": "vue-cli-service e2e", 10 | "lint": "vue-cli-service lint", 11 | "e2e:open": "vue-cli-service e2e:open" 12 | }, 13 | "dependencies": { 14 | "vue": "^2.5.16", 15 | "vue-router": "^3.0.1", 16 | "vuex": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.0.0-beta.9", 20 | "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.9", 21 | "@vue/cli-plugin-eslint": "^3.0.0-beta.9", 22 | "@vue/cli-plugin-unit-jest": "^3.0.0-beta.9", 23 | "@vue/cli-service": "^3.0.0-beta.9", 24 | "@vue/eslint-config-prettier": "^3.0.0-beta.9", 25 | "@vue/test-utils": "^1.0.0-beta.10", 26 | "babel-core": "^7.0.0-0", 27 | "babel-jest": "^22.0.4", 28 | "node-sass": "^4.7.2", 29 | "sass-loader": "^6.0.6", 30 | "vue-template-compiler": "^2.5.13" 31 | }, 32 | "browserslist": [ 33 | "> 1%", 34 | "last 2 versions", 35 | "not ie <= 8" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /app/my-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/app/my-app/public/favicon.ico -------------------------------------------------------------------------------- /app/my-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-app 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app/my-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /app/my-app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/app/my-app/src/assets/logo.png -------------------------------------------------------------------------------- /app/my-app/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /app/my-app/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import store from "./store"; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App) 12 | }).$mount("#app"); 13 | -------------------------------------------------------------------------------- /app/my-app/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Router from "vue-router"; 3 | import Home from "./views/Home.vue"; 4 | import About from "./views/About.vue"; 5 | 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | routes: [ 10 | { 11 | path: "/", 12 | name: "home", 13 | component: Home 14 | }, 15 | { 16 | path: "/about", 17 | name: "about", 18 | component: About 19 | } 20 | ] 21 | }); 22 | -------------------------------------------------------------------------------- /app/my-app/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | mutations: {}, 9 | actions: {} 10 | }); 11 | -------------------------------------------------------------------------------- /app/my-app/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /app/my-app/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /app/my-app/tests/e2e/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "cypress" 4 | ], 5 | "env": { 6 | "mocha": true, 7 | "cypress/globals": true 8 | }, 9 | "rules": { 10 | "strict": "off" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /app/my-app/tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html 2 | 3 | module.exports = (on, config) => { 4 | return Object.assign({}, config, { 5 | fixturesFolder: "tests/e2e/fixtures", 6 | integrationFolder: "tests/e2e/specs", 7 | screenshotsFolder: "tests/e2e/screenshots", 8 | videosFolder: "tests/e2e/videos", 9 | supportFile: "tests/e2e/support/index.js" 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /app/my-app/tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe("My First Test", () => { 4 | it("Visits the app root url", () => { 5 | cy.visit("/"); 6 | cy.contains("h1", "Welcome to Your Vue.js App"); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /app/my-app/tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /app/my-app/tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /app/my-app/tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | }, 5 | rules: { 6 | 'import/no-extraneous-dependencies': 'off' 7 | } 8 | } -------------------------------------------------------------------------------- /app/my-app/tests/unit/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import { shallow } from "@vue/test-utils"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | 4 | describe("HelloWorld.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const msg = "new message"; 7 | const wrapper = shallow(HelloWorld, { 8 | propsData: { msg } 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /app/my-app/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | }; 4 | -------------------------------------------------------------------------------- /class-binding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Class Binding 9 | 10 | 20 | 21 | 22 | 23 |
24 | 25 |

Hello World

26 |

Hello There

27 |
28 | 29 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /comp-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | events 9 | 10 | 15 | 16 | 17 | 18 |
19 |

{{message}}

20 |

{{ counter }}

21 | 22 |
23 | 28 | 29 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /comp-prop-set.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Comp Prop 9 | 10 | 11 | 12 | 13 |
14 | {{welcome}} 15 |
16 | 17 |
18 | 19 |
    20 |
  • {{movie}}
    • 21 |
22 | 23 |
24 | 25 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /comp-prop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Comp Prop 9 | 10 | 11 | 12 | 13 |
14 | {{welcome}} 15 |
16 | 17 |
18 | 19 |
    20 |
  • {{movie}}
    • 21 |
22 |
23 | 24 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /comp-props.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Props 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 | 16 |
17 | 25 | 26 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /comp-scop-slots.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Scoped Slots 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 | 16 |
17 | ✓ 18 | {{todo.name}} 19 |
20 | 21 |
22 | 34 | 35 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /comp-slots.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Slots 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 | 16 |

17 | This is the header 18 |

19 |

20 | this is the footer 21 |

22 |

YO!

23 | 24 |
25 | 33 | 34 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /comp1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Local and Global Components 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 | 16 | 17 |
18 | 26 | 27 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /custom-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Custom Directives 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 |

Hi! This is attached to a new custom directive!

16 |
17 | 18 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /dynamic-comp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dynamic Components 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 32 | 33 | 34 | 43 | 44 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /ecommerce-store/.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 | -------------------------------------------------------------------------------- /ecommerce-store/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | yarn.lock 13 | -------------------------------------------------------------------------------- /ecommerce-store/README.md: -------------------------------------------------------------------------------- 1 | # ecommerce-store 2 | 3 | > Create Awesome Apps ecommerce store 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ yarn run dev 13 | 14 | # build for production and launch server 15 | $ yarn run build 16 | $ yarn start 17 | 18 | # generate static project 19 | $ yarn run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /ecommerce-store/api/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.get('/', (req, res) => { 5 | const gameInfo = [ 6 | { 7 | title: 'Ori And The Will Of The Wisps', 8 | description: 'This is a description for Ori' 9 | }, 10 | { 11 | title: 'Life Is Strange 2', 12 | description: 13 | 'This is a description for Life is Strange' 14 | }, 15 | { 16 | title: 'Call of Duty', 17 | description: 'This is a description of Call of Duty' 18 | }, 19 | { 20 | title: 'World Of Warcraft', 21 | description: 'This is a description World Of Warcraft' 22 | } 23 | ]; 24 | const found = gameInfo.filter(game => { 25 | return game.title === req.query.title; 26 | }); 27 | res.json(found[0].description); 28 | }); 29 | 30 | module.exports = { 31 | path: '/api/', 32 | handler: app 33 | }; 34 | -------------------------------------------------------------------------------- /ecommerce-store/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 | -------------------------------------------------------------------------------- /ecommerce-store/assets/style/app.styl: -------------------------------------------------------------------------------- 1 | // Import Vuetify styling 2 | @require '~vuetify/src/stylus/app.styl' 3 | -------------------------------------------------------------------------------- /ecommerce-store/assets/style/variables.styl: -------------------------------------------------------------------------------- 1 | @require '~vuetify/src/stylus/settings/_variables.styl' 2 | -------------------------------------------------------------------------------- /ecommerce-store/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 | -------------------------------------------------------------------------------- /ecommerce-store/components/game.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 28 | 29 | 30 | 31 | 33 | -------------------------------------------------------------------------------- /ecommerce-store/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 | -------------------------------------------------------------------------------- /ecommerce-store/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 117 | -------------------------------------------------------------------------------- /ecommerce-store/layouts/error.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 16 | -------------------------------------------------------------------------------- /ecommerce-store/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 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /ecommerce-store/middleware/authenticated.js: -------------------------------------------------------------------------------- 1 | export default function({ store, redirect }) { 2 | if (!store.getters.session) { 3 | return redirect('/'); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /ecommerce-store/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package'); 2 | 3 | // const nodeExternals = require('webpack-node-externals'); 4 | const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') 5 | 6 | module.exports = { 7 | mode: 'universal', 8 | 9 | /* 10 | ** Headers of the page 11 | */ 12 | head: { 13 | title: 'Awesome Video Game Store', 14 | meta: [ 15 | { charset: 'utf-8' }, 16 | { 17 | name: 'viewport', 18 | content: 'width=device-width, initial-scale=1' 19 | }, 20 | { 21 | hid: 'description', 22 | name: 'description', 23 | content: pkg.description 24 | } 25 | ], 26 | router: { 27 | //new 28 | middleware: 'session' 29 | }, 30 | link: [ 31 | { 32 | rel: 'icon', 33 | type: 'image/x-icon', 34 | href: '/favicon.ico' 35 | }, 36 | { 37 | rel: 'stylesheet', 38 | href: 39 | 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' 40 | } 41 | ] 42 | }, 43 | 44 | serverMiddleware: ['~api/index.js'], 45 | 46 | /* 47 | ** Customize the progress-bar color 48 | */ 49 | loading: { color: '#FFFFFF' }, 50 | 51 | /* 52 | ** Global CSS 53 | */ 54 | css: ['vuetify/src/stylus/main.styl'], 55 | 56 | /* 57 | ** Plugins to load before mounting the App 58 | */ 59 | // plugins: ['@/plugins/vuetify', '@/plugins/firebase'], 60 | plugins: [ '@/plugins/vuetify', '~/plugins/firebase'], 61 | 62 | /* 63 | ** Nuxt.js modules 64 | */ 65 | modules: [ 66 | // Doc: https://github.com/nuxt-community/axios-module#usage 67 | '@nuxtjs/axios' 68 | ], 69 | /* 70 | ** Axios module configuration 71 | */ 72 | axios: { 73 | // See https://github.com/nuxt-community/axios-module#options 74 | }, 75 | 76 | /* 77 | ** Build configuration 78 | */ 79 | build: { 80 | transpile: ['vuetify/lib'], 81 | plugins: [new VuetifyLoaderPlugin()], 82 | loaders: { 83 | stylus: { 84 | import: ["~assets/style/variables.styl"] 85 | } 86 | }, 87 | /* 88 | ** You can extend webpack config here 89 | */ 90 | extend(config, ctx) { 91 | // if (ctx.isServer) { 92 | // config.externals = [ 93 | // nodeExternals({ 94 | // whitelist: [/^vuetify/] 95 | // }) 96 | // ]; 97 | // } 98 | } 99 | } 100 | }; 101 | -------------------------------------------------------------------------------- /ecommerce-store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecommerce-store", 3 | "version": "1.0.0", 4 | "description": "Create Awesome Apps ecommerce store", 5 | "author": "Erik Hanchett", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", 9 | "build": "nuxt build", 10 | "start": "cross-env NODE_ENV=production node server/index.js", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "@nuxtjs/axios": "^5.0.0", 15 | "circular-json": "^0.5.5", 16 | "express": "^4.15.3", 17 | "express-xml-bodyparser": "^0.3.0", 18 | "firebase": "^5.8.5", 19 | "https": "^1.0.0", 20 | "libxmljs": "^0.19.1", 21 | "nuxt": "^2.4.5", 22 | "request": "^2.88.0", 23 | "vuefire": "^2.0.0-alpha.20", 24 | "vuetify": "^1.5.0", 25 | "vuetify-loader": "^1.2.1", 26 | "xml2js": "^0.4.19", 27 | "xml2json": "^0.11.2" 28 | }, 29 | "devDependencies": { 30 | "cross-env": "^5.0.1", 31 | "nodemon": "^1.11.0", 32 | "stylus": "^0.54.5", 33 | "stylus-loader": "^3.0.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /ecommerce-store/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 create the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /ecommerce-store/pages/checkout.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /ecommerce-store/pages/index.vue: -------------------------------------------------------------------------------- 1 | 35 | 59 | 68 | -------------------------------------------------------------------------------- /ecommerce-store/pages/product/_id.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 56 | 57 | 59 | -------------------------------------------------------------------------------- /ecommerce-store/pages/secret.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /ecommerce-store/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 your 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 | -------------------------------------------------------------------------------- /ecommerce-store/plugins/firebase.js: -------------------------------------------------------------------------------- 1 | import {firestorePlugin} from "vuefire"; 2 | import Vue from "vue"; 3 | import firebase from "firebase/app"; 4 | import "firebase/firestore"; 5 | Vue.use(firestorePlugin); 6 | const config = { 7 | apiKey: "AIzaSyBP8jPc6k5llX2xcj_8QNgZDfnDGDd6_xo", 8 | authDomain: "ecommerce-91b8f.firebaseapp.com", 9 | databaseURL: "https://ecommerce-91b8f.firebaseio.com", 10 | projectId: "ecommerce-91b8f", 11 | storageBucket: "ecommerce-91b8f.appspot.com", 12 | messagingSenderId: "594958977262" 13 | }; 14 | 15 | if (!firebase.apps.length) { 16 | firebase.initializeApp(config); 17 | // firebase 18 | // .firestore() 19 | // .settings(); 20 | } else { 21 | firebase.app(); 22 | } 23 | export const db = firebase.firestore(); 24 | -------------------------------------------------------------------------------- /ecommerce-store/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuetify from 'vuetify' 3 | import colors from 'vuetify/es5/util/colors' 4 | 5 | Vue.use(Vuetify, { 6 | theme: { 7 | primary: '#121212', // a color that is not in the material colors palette 8 | accent: colors.grey.darken3, 9 | secondary: colors.amber.darken3, 10 | info: colors.teal.lighten1, 11 | warning: colors.amber.base, 12 | error: colors.deepOrange.accent4, 13 | success: colors.green.accent3 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /ecommerce-store/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const { Nuxt, Builder } = require("nuxt"); 3 | const app = express(); 4 | const host = process.env.HOST || "127.0.0.1"; 5 | const port = process.env.PORT || 3000; 6 | 7 | app.set("port", port); 8 | 9 | // Import and Set Nuxt.js options 10 | let config = require("../nuxt.config.js"); 11 | config.dev = !(process.env.NODE_ENV === "production"); 12 | 13 | async function start() { 14 | // Init Nuxt.js 15 | const nuxt = new Nuxt(config); 16 | 17 | // Build only in dev mode 18 | if (config.dev) { 19 | const builder = new Builder(nuxt); 20 | await builder.build(); 21 | } 22 | 23 | // Give nuxt middleware to express 24 | app.use(nuxt.render); 25 | 26 | // Listen the server 27 | app.listen(port, host); 28 | console.log( 29 | "Server listeningss on http://" + host + ":" + port 30 | ); // eslint-disable-line no-console 31 | } 32 | start(); 33 | -------------------------------------------------------------------------------- /ecommerce-store/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 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /ecommerce-store/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/ecommerce-store/static/favicon.ico -------------------------------------------------------------------------------- /ecommerce-store/static/v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/ecommerce-store/static/v.png -------------------------------------------------------------------------------- /ecommerce-store/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 activate the option in the framework automatically. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /ecommerce-store/store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex'; 2 | import firebase from 'firebase/app'; 3 | import 'firebase/auth'; 4 | 5 | const createStore = () => { 6 | return new Vuex.Store({ 7 | state: { 8 | session: false, 9 | products: [] 10 | }, 11 | mutations: { 12 | SET_SESSION(state, session) { 13 | state.session = session; 14 | }, 15 | SET_PRODUCT(state, product) { 16 | state.products = product; 17 | } 18 | }, 19 | getters: { 20 | session: state => state.session, 21 | products: state => state.products 22 | }, 23 | actions: { 24 | setSession({ commit }) { 25 | firebase.auth().onAuthStateChanged(user => { 26 | commit('SET_SESSION', user || false); 27 | }); 28 | }, 29 | setProduct({ commit }, products) { 30 | commit('SET_PRODUCT', products); 31 | } 32 | } 33 | }); 34 | }; 35 | 36 | export default createStore; 37 | -------------------------------------------------------------------------------- /expressions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hello World App 9 | 10 | 11 | 12 | 13 |
14 |

15 | {{ val ? data : otherData }} 16 |

17 |
18 | 19 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /if-else-adv.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | If else App 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |

Hello

18 |

Goodbye

19 |

Yo Default

20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 | 29 |
30 | 31 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /if-else.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | If else App 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |

Hello

18 |

Goodbye

19 |

Yo Default

20 |
21 | 22 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hello World App 9 | 10 | 11 | 12 | 13 |
14 |

15 | {{ hello }} 16 |

17 |
18 | 19 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /lifeycle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hello World App 9 | 10 | 11 | 12 | 13 |
14 |

15 | {{ hello }} 16 |

17 |
18 | 19 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /methods-adv.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hello World App 9 | 10 | 11 | 12 | 13 |
14 |

15 | {{ checker() }} 16 |

17 | {{incrementer}} 18 |
19 |
20 | 21 |
22 | 23 |
24 | 25 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /methods.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hello World App 9 | 10 | 11 | 12 | 13 |
14 |

15 | {{ checker() }} 16 |

17 | {{incrementer}} 18 |
19 | 20 | 21 | 22 |
23 | 24 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /mixin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mixins 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 | 16 |
17 | 18 | 19 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /movies.json: -------------------------------------------------------------------------------- 1 | { 2 | "movies": [ 3 | { 4 | "name": "Gone With The Wind" 5 | }, 6 | { 7 | "name": "Die Hard" 8 | }, 9 | { 10 | "name": "American Beauty" 11 | }, 12 | { 13 | "name": "American Pie" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /render.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Render 9 | 10 | 11 | 12 | 13 |
14 |

{{message}}

15 |
16 | 17 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /router-app/router-app/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /router-app/router-app/.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /router-app/router-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /router-app/router-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "router-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.5.16", 11 | "vue-router": "^3.0.1" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.4.1", 15 | "@vue/cli-service": "^3.4.1", 16 | "prettier": "^1.12.0", 17 | "vue-template-compiler": "^2.5.16" 18 | }, 19 | "browserslist": [ 20 | "> 1%", 21 | "last 2 versions", 22 | "not ie <= 8" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /router-app/router-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/router-app/router-app/public/favicon.ico -------------------------------------------------------------------------------- /router-app/router-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | router-app 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /router-app/router-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 33 | -------------------------------------------------------------------------------- /router-app/router-app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/router-app/router-app/src/assets/logo.png -------------------------------------------------------------------------------- /router-app/router-app/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 39 | 40 | 41 | 57 | -------------------------------------------------------------------------------- /router-app/router-app/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /router-app/router-app/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Router from "vue-router"; 3 | import Home from "./views/Home.vue"; 4 | import About from "./views/About.vue"; 5 | import Me from "./views/Me.vue"; 6 | import UserProfile from "./views/UserProfile.vue"; 7 | 8 | Vue.use(Router); 9 | 10 | export default new Router({ 11 | mode: "history", 12 | routes: [ 13 | { 14 | path: "/", 15 | name: "home", 16 | component: Home 17 | }, 18 | { 19 | path: "/about", 20 | name: "about", 21 | component: About 22 | }, 23 | { 24 | path: "/me/:id", 25 | name: "me", 26 | component: Me, 27 | children: [ 28 | { 29 | path: "UserProfile", 30 | name: "UserProfile", 31 | component: UserProfile 32 | } 33 | ] 34 | } 35 | ] 36 | }); 37 | -------------------------------------------------------------------------------- /router-app/router-app/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /router-app/router-app/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /router-app/router-app/src/views/Me.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /router-app/router-app/src/views/UserProfile.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /test-example/my-test-cypress/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /test-example/my-test-cypress/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-test-cypress", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:e2e": "vue-cli-service test:e2e" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.16" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.4.1", 15 | "@vue/cli-plugin-e2e-cypress": "^3.4.1", 16 | "@vue/cli-service": "^3.4.1", 17 | "vue-template-compiler": "^2.5.16" 18 | }, 19 | "browserslist": [ 20 | "> 1%", 21 | "last 2 versions", 22 | "not ie <= 8" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/test-example/my-test-cypress/public/favicon.ico -------------------------------------------------------------------------------- /test-example/my-test-cypress/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-test-cypress 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/test-example/my-test-cypress/src/assets/logo.png -------------------------------------------------------------------------------- /test-example/my-test-cypress/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 27 | 28 | 29 | 45 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html 2 | 3 | module.exports = (on, config) => { 4 | return Object.assign({}, config, { 5 | fixturesFolder: 'tests/e2e/fixtures', 6 | integrationFolder: 'tests/e2e/specs', 7 | screenshotsFolder: 'tests/e2e/screenshots', 8 | videosFolder: 'tests/e2e/videos', 9 | supportFile: 'tests/e2e/support/index.js' 10 | }) 11 | } 12 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe("My First Test", () => { 4 | it("Visits the app root url", () => { 5 | cy.visit("http://localhost:8080"); 6 | cy.contains("h1", "Welcome to Your Vue.js App"); 7 | }); 8 | 9 | it("check counter", () => { 10 | cy.visit("http://localhost:8080"); 11 | cy.get("button").click(); 12 | cy.get("h2").contains("h2", "1"); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /test-example/my-test-cypress/tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /test-example/my-test-jest-example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /test-example/my-test-jest-example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue' 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest' 12 | }, 13 | moduleNameMapper: { 14 | '^@/(.*)$': '/src/$1' 15 | }, 16 | snapshotSerializers: [ 17 | 'jest-serializer-vue' 18 | ], 19 | testMatch: [ 20 | '/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))' 21 | ] 22 | } -------------------------------------------------------------------------------- /test-example/my-test-jest-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-test-jest-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.16", 12 | "vue-router": "^3.0.1" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.4.1", 16 | "@vue/cli-plugin-unit-jest": "^3.4.1", 17 | "@vue/cli-service": "^3.4.1", 18 | "@vue/test-utils": "^1.0.0-beta.16", 19 | "babel-core": "7.0.0-bridge.0", 20 | "babel-jest": "^22.4.3", 21 | "node-sass": "^4.11.0", 22 | "sass-loader": "^7.0.1", 23 | "vue-template-compiler": "^2.5.16", 24 | "wallaby-vue-compiler": "^1.0.2" 25 | }, 26 | "browserslist": [ 27 | "> 1%", 28 | "last 2 versions", 29 | "not ie <= 8" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/test-example/my-test-jest-example/public/favicon.ico -------------------------------------------------------------------------------- /test-example/my-test-jest-example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-test-jest-example 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ErikCH/CreateAwesomeNuxtjs/d90a27c99af42f586ac84328e37c445f49e19829/test-example/my-test-jest-example/src/assets/logo.png -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 27 | 28 | 29 | 45 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | import About from './views/About.vue' 5 | 6 | Vue.use(Router) 7 | 8 | export default new Router({ 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'home', 13 | component: Home 14 | }, 15 | { 16 | path: '/about', 17 | name: 'about', 18 | component: About 19 | } 20 | ] 21 | }) 22 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/tests/unit/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | 4 | describe("HelloWorld.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const msg = "new message"; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg } 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | 13 | it("check counter after increment button is pressed", () => { 14 | const wrapper = shallowMount(HelloWorld); 15 | expect(wrapper.vm.counter).toBe(0); 16 | wrapper.find("button").trigger("click"); 17 | expect(wrapper.vm.counter).toBe(1); 18 | }); 19 | 20 | it("check increment method", () => { 21 | const wrapper = shallowMount(HelloWorld); 22 | wrapper.vm.increment(); 23 | expect(wrapper.vm.counter).toBe(1); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /test-example/my-test-jest-example/wallaby.js: -------------------------------------------------------------------------------- 1 | module.exports = wallaby => { 2 | const compiler = wallaby.compilers.babel({ 3 | presets: [["@vue/app", { modules: "commonjs" }]] 4 | }); 5 | 6 | return { 7 | files: ["src/**/*", "jest.config.js", "package.json"], 8 | 9 | tests: ["tests/**/*.spec.js"], 10 | 11 | env: { 12 | type: "node", 13 | runner: "node" 14 | }, 15 | 16 | compilers: { 17 | "**/*.js": compiler, 18 | "**/*.vue": require("wallaby-vue-compiler")(compiler) 19 | }, 20 | 21 | preprocessors: { 22 | "**/*.vue": file => 23 | require("vue-jest").process(file.content, file.path) 24 | }, 25 | 26 | setup: function(wallaby) { 27 | const jestConfig = 28 | require("./package").jest || 29 | require("./jest.config"); 30 | jestConfig.transform = {}; 31 | wallaby.testFramework.configure(jestConfig); 32 | }, 33 | 34 | testFramework: "jest", 35 | 36 | debug: true 37 | }; 38 | }; 39 | -------------------------------------------------------------------------------- /v-bind-v-show.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | If else App 9 | 10 | 11 | 12 | 13 |
14 |

Hello World

15 | 16 |
{{rawHTML}} 17 |

18 | 19 |
20 | 21 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /v-for.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | V-for App 9 | 10 | 11 | 12 | 13 |
14 |
    15 |
  • {{index}}: {{book}}
    • 16 |
17 | 18 |
    19 |
  • {{index}} {{key}}: {{value}}
    • 20 |
21 | 22 |
    23 |
  • {{n}}
    • 24 |
25 | 26 |
27 | 28 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /v-model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | v-model 9 | 10 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
Checkout Page
19 |
20 |
21 |
22 |

23 | Enter Your Information 24 |

25 |
26 |
27 |
28 | First Name: 29 | 30 |
31 |
32 | Last Name: 33 | 34 |
35 |
36 |
37 |
38 | Address: 39 |
40 |
41 | 42 |
43 |
44 |
45 |
46 | City: 47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 | State: 55 | 67 |
68 |
69 |
70 |
71 | Zip / Postal Code: 72 | 73 |
74 |
75 | 76 |
77 |
78 | 79 | 80 |
81 |
82 |
83 |
84 | 85 | 86 | 87 | 88 |
89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 | 
 97 |                               First Name:  {{order.firstName}}
 98 |                               Last Name:    {{order.lastName}} 
 99 |                               Address: {{order.address}} 
100 |                               City: {{order.city}} 
101 |                               Zip: {{typeof(order.zip)}} 
102 |                               State: {{order.state}} 
103 |                               Method: {{order.addressSelection}} 
104 |                               Gift: {{order.checkbox}} 
105 |
106 |
107 |
108 |
109 |
110 | 111 | 112 |
113 |
114 | 115 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /watcher.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Watchers 9 | 10 | 11 | 12 | 13 |
14 | {{counter}} 15 |
16 | 17 | 18 |
19 | 20 | 48 | 49 | 50 | --------------------------------------------------------------------------------