├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── arkit.svg ├── components ├── footer.vue └── header.vue ├── layouts └── default.vue ├── nuxt.config.js ├── package.json ├── pages └── _slug.vue ├── renovate.json ├── server.js ├── static └── favicon.ico ├── store └── index.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | node: true, 10 | mocha: true 11 | }, 12 | extends: 'standard', 13 | // required to lint *.vue files 14 | plugins: [ 15 | 'html' 16 | ], 17 | // add your custom rules here 18 | rules: { 19 | // allow paren-less arrow functions 20 | 'arrow-parens': 0, 21 | // allow async-await 22 | 'generator-star-spacing': 0, 23 | // allow debugger during development 24 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 25 | // do not allow console.logs etc... 26 | 'no-console': 2 27 | }, 28 | globals: {} 29 | } 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # other 8 | .nuxt 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js TodoMVC Example 2 | 3 | > Nuxt.js is a framework for building Universal Vue.js Applications. 4 | 5 | > _[Nuxt.js - nuxtjs.org](https://nuxtjs.org)_ 6 | 7 | ![arkit](./arkit.svg?sanitize=true) 8 | 9 | ## Setup 10 | 11 | ```bash 12 | # install dependencies 13 | npm install # or yarn 14 | 15 | # serve in dev mode, with hot reload at localhost:3000 16 | npm run dev 17 | 18 | # build for production 19 | npm run build 20 | 21 | # serve in production mode 22 | npm start 23 | ``` 24 | 25 | ## Learning Nuxt.js 26 | 27 | The [Nuxt.js website](https://nuxtjs.org/) is a great resource to get started. 28 | 29 | Here are some links you may find helpful: 30 | 31 | * [Official Guide](https://nuxtjs.org/guide) 32 | * [API Reference](https://nuxtjs.org/api) 33 | * [Examples](https://nuxtjs.org/examples) 34 | 35 | Get help from other Vue.js users: 36 | 37 | * [Nuxt.js on Twitter](https://twitter.com/nuxt_js) 38 | * [Nuxt.js on Gitter](https://gitter.im/nuxt/nuxt.js) 39 | -------------------------------------------------------------------------------- /arkit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/footer.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 41 | -------------------------------------------------------------------------------- /components/header.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | head: { 3 | title: 'TodoMVC made with Nuxt.js', 4 | meta: [ 5 | { charset: 'utf-8' }, 6 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 7 | { hid: 'description', content: 'TodoMVC project made with Nuxt.js.' } 8 | ], 9 | link: [ 10 | { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' } 11 | ] 12 | }, 13 | css: [ 14 | { src: 'todomvc-app-css/index.css' } 15 | ], 16 | router: { 17 | linkActiveClass: 'selected' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todomvc", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Alexandre Chopin ", 6 | "private": true, 7 | "dependencies": { 8 | "axios": "^0.15.3", 9 | "body-parser": "^1.16.0", 10 | "express": "^4.14.0", 11 | "express-session": "^1.15.0", 12 | "nuxt": "latest", 13 | "todomvc-app-css": "^2.0.6" 14 | }, 15 | "scripts": { 16 | "arkit": "arkit -o arkit.svg", 17 | "dev": "node server.js", 18 | "build": "nuxt build", 19 | "start": "node server.js", 20 | "deploy": "now -e NODE_ENV=production", 21 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 22 | "precommit": "npm run lint" 23 | }, 24 | "devDependencies": { 25 | "arkit": "dyatko/arkit#master", 26 | "babel-eslint": "^7.1.1", 27 | "eslint": "^3.13.1", 28 | "eslint-config-standard": "^6.2.1", 29 | "eslint-plugin-html": "^1.7.0", 30 | "eslint-plugin-promise": "^3.4.0", 31 | "eslint-plugin-standard": "^2.0.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/_slug.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 97 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const bodyParser = require('body-parser') 2 | const session = require('express-session') 3 | const app = require('express')() 4 | const { Nuxt, Builder } = require('nuxt') 5 | 6 | // Body parser, to access req.body 7 | app.use(bodyParser.json()) 8 | 9 | // Sessions to create req.session 10 | app.use(session({ 11 | secret: 'super-secret-key', 12 | resave: false, 13 | saveUninitialized: false, 14 | cookie: { maxAge: 60000 } 15 | })) 16 | 17 | app.put('/api/todos', function (req, res) { 18 | req.session.todos = req.body.todos 19 | res.json(req.session.todos) 20 | }) 21 | 22 | // We instantiate Nuxt.js with the options 23 | const isProd = process.env.NODE_ENV === 'production' 24 | let config = require('./nuxt.config.js') 25 | config.dev = !isProd 26 | const nuxt = new Nuxt(config) 27 | // No build in production 28 | const promise = (isProd ? Promise.resolve() : new Builder(nuxt).build()) 29 | promise.then(() => { 30 | app.use(nuxt.render) 31 | app.listen(3000) 32 | console.log('Server is listening on http://localhost:3000') // eslint-disable-line no-console 33 | }) 34 | .catch((error) => { 35 | console.error(error) // eslint-disable-line no-console 36 | process.exit(1) 37 | }) 38 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt/todomvc/b8e85cd93e5e2bcf190bc4288a56b28d388c13e9/static/favicon.ico -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import axios from 'axios' 4 | 5 | Vue.use(Vuex) 6 | 7 | const store = () => new Vuex.Store({ 8 | state: { 9 | todos: [] 10 | }, 11 | getters: { 12 | allTodos (state) { 13 | return state.todos 14 | }, 15 | activeTodos (state) { 16 | return state.todos.filter(todo => !todo.completed) 17 | }, 18 | completedTodos (state) { 19 | return state.todos.filter(todo => todo.completed) 20 | } 21 | }, 22 | mutations: { 23 | SET_TODOS (state, todos) { 24 | state.todos = todos 25 | }, 26 | ADD_TODO (state, todo) { 27 | state.todos.push(todo) 28 | }, 29 | REMOVE_TODO (state, todo) { 30 | var i = state.todos.indexOf(todo) 31 | state.todos.splice(i, 1) 32 | }, 33 | FILTER_TODOS (state, value) { 34 | state.todos.forEach((todo) => { 35 | todo.completed = !value 36 | }) 37 | } 38 | }, 39 | actions: { 40 | addTodo ({ commit }, todo) { 41 | commit('ADD_TODO', todo) 42 | }, 43 | setTodos ({ commit }, todos) { 44 | commit('SET_TODOS', todos) 45 | }, 46 | removeTodo ({ commit }, todo) { 47 | commit('REMOVE_TODO', todo) 48 | }, 49 | allDone ({ state, commit }) { 50 | var value = state.todos.filter(todo => todo.completed).length === state.todos.length 51 | commit('FILTER_TODOS', value) 52 | }, 53 | saveTodos ({ state }) { 54 | axios.put('/api/todos', { todos: state.todos }) 55 | }, 56 | nuxtServerInit ({ commit }, { req }) { 57 | commit('SET_TODOS', req.session ? (req.session.todos || []) : []) 58 | } 59 | } 60 | }) 61 | 62 | export default store 63 | --------------------------------------------------------------------------------