Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

Gma_Gama
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away