co6ei note

Nuxt.jsの開発環境を整える

記事をTwitterで共有

とりあえずこのページの通りに進める。

yarn create nuxt-app <project-name>

色々質問されるが、ずっとEnter押し続けるだけでもOKだと思う。

僕の場合は、

Choose Nuxt.js modulesで、AxiosPWA Support

Choose linting toolsで、ESLintPrettier

のチェックをすべて入れた。あると便利。

少し迷ったのが、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する。

にアクセスすると以下の画面が現れる。

Nuxtのインストール後の画面

順調そうだが、yarn devしたタイミングでERRORを吐いた......。

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

以下のIssueによると、Nuxtのpwa-moduleを最新のベータ版(v3.0.0-beta.16)にアップデートしてくれ、とのこと。

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead · Issue #120 · nuxt-community/pwa-module

yarn upgrade --latest @nuxtjs/pwa

で最新のバージョンにアップグレードされる。

更新することによってエラーは出なくなったが、あくまでベータ版なので自己責任で。

作ってもらったNuxtのプロジェクトを触ることは今までにもあったのだが、思っていたよりもアッサリ環境構築ができた。

まだNuxtがどういう構造になっているのか良く分からないので次はHello Worldまでやっていく。

nuxtjs.org