とりあえずこのページの通りに進める。
yarn create nuxt-app <project-name>
色々質問されるが、ずっとEnter押し続けるだけでもOKだと思う。
僕の場合は、
Choose Nuxt.js modulesで、AxiosとPWA Support
Choose linting toolsで、ESLintとPrettier
のチェックをすべて入れた。あると便利。
少し迷ったのが、Choose rendering modeという項目。Universal(SSR)かSingle Page Appか選ぶのだが、どう選ぶべきなのかイマイチわからない。
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら - Qiita
この記事には、
SPA（Single Page Application） 利点 ・実装しやすい ・サーバーの準備が楽 欠点 ・初期表示が遅い ・SEOに不安がある ・OGをページごとに設定できない
SSR（Server Side Rendering） 利点 ・SPAの欠点を解消できる 欠点 ・実装が少し面倒 ・サーバーの準備が面倒
とある。
実装しやすいなら、ということでSPAを選択することにした。欠点の「SEOに不安がある」「OGをページごとに設定できない」というのは解決可能な気もするのだけど、どうなのだろう？
SPAはGatsby.jsでの実装しかまだしたことがないので、NuxtにはNuxtの作法と言うか、仕様みたいなものもあるのかもしれない。
ということで、Single Page Applicationを選択して、インストールが開始される。
作られたディレクトリにcdで移動して、yarn devする。
順調そうだが、yarn devしたタイミングでERRORを吐いた......。
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
以下のIssueによると、Nuxtのpwa-moduleを最新のベータ版(v3.0.0-beta.16)にアップデートしてくれ、とのこと。
yarn upgrade --latest @nuxtjs/pwa
で最新のバージョンにアップグレードされる。
更新することによってエラーは出なくなったが、あくまでベータ版なので自己責任で。
作ってもらったNuxtのプロジェクトを触ることは今までにもあったのだが、思っていたよりもアッサリ環境構築ができた。
まだNuxtがどういう構造になっているのか良く分からないので次はHello Worldまでやっていく。