🐕 Vue教材Trello風アプリ:Nuxt3版①
作成日: 2021/12/15
1

Vue教材Trello風アプリをVue3/Typescriptで作り直したい
#Vue CLIかNuxtか
まずVue3をインストールか、と思った時にVue CLIとNuxtはどれくらい何が違うのか気になりました。
・読んだ記事
https://qiita.com/beanzou/items/772b42687810539b9237
https://qiita.com/macoshita/items/bf295a1e0f5fefff3d8e

2018年の記事ですが、どういう風に使い分ければいいかの参考になりました。
そこで、今回はどうせVuexも必要だし、全部揃っているNuxtで良いか、と思ってNuxtにすることにしました。

#どうせならNuxt3で
学習のためのアプリ制作なのでNuxt3ベータ版でやってみようとNuxt3で作ることにしました。
まず、公式でインストール方法を確認。
introductionで下記の環境をお勧め

  • Node.js* (latest LTS version)
  • Visual Studio Code
  • Volar Extension
    Volar Extensionは入ってなかったのでVScodeのExtensionでインストール。

その後インストール手順に従ってNuxt3をインストールしてyarn devまで問題なく進めました。

#ディレクトリ構造の違い
Nuxt2やVue CLIでinitした時よりもかなりシンプルな構造。必要なものは自分で追加ということらしい。
Nuxt3のドキュメントを見ながら進める。多分storeの代わりにcomposablesを使うみたい??