├── .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 |
2 |
3 | {{label}}
4 |
5 |
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 |
2 |
3 |
4 |
5 |
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 |
2 |
3 |
Example Nuxt + vuex module
4 |
{{ pokemon.name }}
5 |
6 |
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
--------------------------------------------------------------------------------