├── .eslintrc.js ├── .gitignore ├── README.md ├── app.html ├── app ├── mutations.js └── state.js ├── assets └── README.md ├── components ├── README.md └── appButton.vue ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package.json ├── pages ├── README.md └── index.vue ├── static ├── README.md ├── favicon.ico └── images │ ├── loader.svg │ └── logo.png ├── store ├── index.js └── modules │ ├── api-logic │ ├── actions.js │ ├── getters.js │ ├── index.js │ └── mutations.js │ └── app-logic │ ├── actions.js │ ├── getters.js │ ├── index.js │ └── mutations.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: { 21 | 'semi': ['error', 'never'] 22 | } 23 | } -------------------------------------------------------------------------------- /.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 | 13 | .idea/ 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueJS Starter Project 2 | 3 | Ce document explique vite vite comment le starter project marche et ce qu'il inclu. 4 | 5 | Pour partir le projet vous devez soit 6 | 7 | 1. yarn install et yarn run dev (dev + server) 8 | 2. yarn install et yarn run build (production) et npm start pour rouler la version production 9 | 10 | ##Inclus 11 | 1. Nuxt (Vue, Vuex, Vue-Router + structure) 12 | 2. Axios (ajax) 13 | 3. Vee-Validate (validation) 14 | 15 | -------------------------------------------------------------------------------- /app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ HEAD }} 5 | 6 | 7 | {{ APP }} 8 | 9 | -------------------------------------------------------------------------------- /app/mutations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Store's Mutations 4 | * 5 | */ 6 | 7 | export default { 8 | // App wide mutations 9 | setCurrentPage(state, title) { 10 | state.currentPage = title 11 | } 12 | } -------------------------------------------------------------------------------- /app/state.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Store State data 4 | * 5 | */ 6 | 7 | export default { 8 | version: '1.0.0', 9 | currentPage: 'home' 10 | } -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /components/appButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'Corentin basic starter', 7 | meta: [ 8 | {charset: 'utf-8'}, 9 | {name: 'viewport', content: 'width=device-width, initial-scale=1'}, 10 | {hid: 'description', name: 'description', content: 'Nuxt.js project'} 11 | ], 12 | link: [ 13 | {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}, 14 | { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } 15 | ] 16 | }, 17 | plugins: [], 18 | 19 | /* 20 | ** Customize the progress bar color 21 | */ 22 | //loading: {color: '#3B8070'}, 23 | loading: false, 24 | /* 25 | ** Build configuration 26 | */ 27 | build: { 28 | /* 29 | ** Run ESLint on save 30 | */ 31 | extend(config, {isDev}) { 32 | if (isDev && process.client) { 33 | config.module.rules.push({ 34 | enforce: 'pre', 35 | test: /\.(js|vue)$/, 36 | loader: 'eslint-loader', 37 | exclude: /(node_modules)/ 38 | }) 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-nuxt-starter", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Corentin Marzin ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint" 14 | }, 15 | "dependencies": { 16 | "axios": "^0.18.0", 17 | "node-sass": "^4.9.0", 18 | "nuxt": "^2.1.0", 19 | "sass-loader": "^7.0.3" 20 | }, 21 | "devDependencies": { 22 | "babel-eslint": "^8.2.1", 23 | "eslint": "^4.15.0", 24 | "eslint-friendly-formatter": "^3.0.0", 25 | "eslint-loader": "^1.7.1", 26 | "eslint-plugin-vue": "^4.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMarzin/nuxt-vuex-modules/8effa2723087a61e8884dba60b558e92768616e9/static/favicon.ico -------------------------------------------------------------------------------- /static/images/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMarzin/nuxt-vuex-modules/8effa2723087a61e8884dba60b558e92768616e9/static/images/logo.png -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex'; 2 | import apiModule from './modules/api-logic'; 3 | import appModule from './modules/app-logic'; 4 | 5 | const createStore = () => { 6 | return new Vuex.Store({ 7 | namespaced: true, 8 | modules: { 9 | appLogic: appModule, 10 | api: apiModule, 11 | } 12 | }); 13 | }; 14 | 15 | export default createStore -------------------------------------------------------------------------------- /store/modules/api-logic/actions.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default { 4 | callThePokemon: ({ commit }, id) => { 5 | 6 | console.log('I make the call here') 7 | axios.get('http://pokeapi.salestock.net/api/v2/pokemon/' + id).then(response => commit('update_pokemon', response.data)) 8 | } 9 | } -------------------------------------------------------------------------------- /store/modules/api-logic/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | getPokemon: state => state.pokemon 3 | } 4 | -------------------------------------------------------------------------------- /store/modules/api-logic/index.js: -------------------------------------------------------------------------------- 1 | import actions from './actions'; 2 | import getters from './getters'; 3 | import mutations from './mutations'; 4 | 5 | const defaultState = { 6 | pokemon: {} 7 | } 8 | 9 | const inBrowser = typeof window !== 'undefined'; 10 | // if in browser, use pre-fetched state injected by SSR 11 | const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState; 12 | 13 | export default { 14 | state, 15 | actions, 16 | mutations, 17 | getters 18 | } 19 | -------------------------------------------------------------------------------- /store/modules/api-logic/mutations.js: -------------------------------------------------------------------------------- 1 | export default { 2 | update_pokemon: (state, pokemon) => { 3 | state.pokemon = pokemon 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /store/modules/app-logic/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | callPokemonFromAppLogic: ({ dispatch }, id) => { 3 | dispatch('callThePokemon', id, {root:true}); 4 | }, 5 | }; -------------------------------------------------------------------------------- /store/modules/app-logic/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | bidule: state => state.machin 3 | } -------------------------------------------------------------------------------- /store/modules/app-logic/index.js: -------------------------------------------------------------------------------- 1 | import actions from './actions'; 2 | import getters from './getters'; 3 | import mutations from './mutations'; 4 | 5 | const defaultState = { 6 | machin: 'truc' 7 | } 8 | 9 | const inBrowser = typeof window !== 'undefined'; 10 | // if in browser, use pre-fetched state injected by SSR 11 | const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState; 12 | 13 | export default { 14 | state, 15 | actions, 16 | mutations, 17 | getters 18 | } -------------------------------------------------------------------------------- /store/modules/app-logic/mutations.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CMarzin/nuxt-vuex-modules/8effa2723087a61e8884dba60b558e92768616e9/store/modules/app-logic/mutations.js --------------------------------------------------------------------------------