NuxtでTodoアプリを作成する

はじめに

気になっていたNuxtを触ってみました。
軽く触れて、ドキュメントを読んだだけでしたが今回は簡単なtodoアプリの作成をしてみます。

Nuxtは日本語のドキュメントがとても充実していてインストール - Nuxt.js を見ればほぼ誰でもNuxtを簡単に始めることができます（すごい)

SetUp

install

npx create-nuxt-app myNuxtTodos
# 略
Use a custom server framework (Use arrow keys) # Nuxt試すだけが目的なのでサーバーサイドFWは使わずにいきます。
❯ none
  express
  ...
Use a custom UI framework (Use arrow keys) # UI FWも特に使わずにいきます。
❯ none
  bootstrap
  vuetify
  ...
Choose rendering mode (Use arrow keys) # 今回はUniversalではなくSPAにします。
  Universal
❯ Single Page App
# その他は以下のような設定で行いました。
Use axios module yes
Use eslint yes
Use prettier yes
# あとは勝手にNuxtのプロジェクトが作成されます

起動方法

インストールシーケンスに書いてる通りです。devしか触るときは使ってません。

To get started:

  cd myNuxtTodos
  npm run dev

To build & start for production:

  cd myNuxtTodos
  npm run build
  npm start

ちょっとハマった

eslintをONにした状態でデフォルトでNuxtのアプリケーションを起動すると

/path/to/myNuxtTodos/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

というエラーにもしかしたら当たるかもしれませんが、これは書いてる通りに pages/index.vue ファイルで style 属性に改行が入ってることが問題なので該当行の改行を削除すれば問題なく起動します。

Vuexのモードを指定する

NuxtでVuexを使う場合、クラシックモード と モジュールモード があります。

クラシックモードとは？

Vuex インスタンスを返すメソッドをエクスポートする store/index.js ファイルを作成します。ファイルとしては stores/index.js のみがあってこの中で Vuex をインスタンス化し、actions, mutations, getters が全て一箇所にまとまってる状態のファイルがあることを指します。

モジュールモードとは？

store ディレクトリ内にモジュールと対応するファイルを持つようにjsファイルを分割することです。 jsのファイル的には stores の中に分割するStateごとのjsファイルを作成します。

TODOアプリを作ってみる。

ドキュメントに沿って簡単なTodoアプリを作ってみます。ちなみに内容はVuexの章にあるTodoのほぼコピペです。Vuexはモジュールモードを使いました。

コードはこちらに上げてます。
il/myNuxtTodos at master · emahiro/il · GitHub

まとめ

ほぼドキュメントのコピペでしたが、Vue/Vuexの基本的なところがわかってる方にがサクッとvueのアプリを作ることができるなと感じました。 NuxtってVueでSSRを簡単にできるライブラリ？くらいの理解でしたがVueのアプリケーションを簡単に作成できるFWという説明がなんとなく理解できました。
今回は素のjsで書いたのですが、いつも業務で扱ってる技術スタックは Typescriptなので Nuxt/Typescriptを使う方 (公式ではすでに typescript-template/template at master · nuxt-community/typescript-template · GitHub があるけれど)を試してみたいと思います。

emahiro/b.log

日々の勉強の記録とか育児の記録とか。