Edited at

nuxtjsでtodo アプリケーションを作成

More than 1 year has passed since last update.


nuxtjsでto doアプリケーションの実装

参考:nuxt Vuexストア


nuxtjsのセットアップ

$ vue init nuxt-community/starter-template <project_name>

$ cd <project_name>
$ npm install
$ npm run dev

localhost:3000にアクセスして、以下の画像が表示されたら、確認終了。

nuxt firebase.png


todo アプリケーションの作成


ルーティングの追加

project_path/pagesのディレクトリにindex.vueを作成します。

.

|- pages
| |- index.vue // root
| |- todos // directoryを作成
| |- index.vue // fileを作成


pages/todos/index.vue

  <template>

<div>
todos
</div>
</template>

<script>
export default {}
</script>

<style>
</style>


以上のようにディレクトリを作成すると動的にルーティングが作成されます。

確認のため、localhost:3000/todosにアクセスしてみると、

自動的にroutingが作成されます。

.

|- .nuxt
| |- router.vue //記述が追加されています。

参考:nuxt ルーティング


Vuex


Vuexの追加

nuxtにはVuexがもともと入っています。

そのため、installする必要はなく、有効化のみで対応可能です。


参考: Vuex ストア


Vuexの有効化


nuxt.config.js

module.exports = {

/*
** Headers of the page
*/

head: {
title: 'nuxt-firebase',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// ここから
build: {
vendor: [
'vuex',
]
},
// ここまでを追加
/*
** Customize the progress bar color
*/

loading: { color: '#3B8070' },
/*
** Build configuration
*/

build: {
/*
** Run ESLint on save
*/

extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}



Vuex Storeの作成

store/todos.jsファイルを追加して、storeを作成します。


store/todos.js

export const state = () => ({

list: []
})

export const mutations = {
add (state, text) {
state.list.push({
text: text,
done: false,
id: state.list.length + 1,
})
},
remove (state, { todo }) {
state.list.splice(state.list.indexOf(todo), 1)
},
toggle (state, todo) {
todo.done = !todo.done
}
}



View


Viewの作成

先ほどroutingで作った、pages/todos/index.vueを編集します。

removeがチュートリアルがなかったので、適当に作成。


todos/index.vue

<template>

<ul>
<li v-for="todo in todos" :key="todo.id">
<input type="checkbox" :checked="todo.done" @change="toggle(todo)">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(todo)">remove</button>
</li>
<li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
</ul>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
computed: {
todos () { return this.$store.state.todos.list }
},
methods: {
removeTodo (todo) {
this.$store.commit('todos/remove', todo);
},
addTodo (e) {
this.$store.commit('todos/add', e.target.value)
e.target.value = ''
},
...mapMutations({
toggle: 'todos/toggle'
})
}
}
</script>

<style>
.done {
text-decoration: line-through;
}
</style>


localhost:3000/todosにアクセスすると、

CSSがほぼあたっていないものが作成されます。

こんな感じ。

nuxt firebase (1).png