Nuxt.js v2.12 から Nuxt.js v2.13, v2.14 へバージョンアップした時の注意点や
変わったと感じたことまとめます。
各バージョンの大きな特徴として、v2.13 では静的ビルドが強化され、
v2.14 ではビルド周りの整理・高速化が行われました。
この記事では、下記のバージョンで検証を行っています。
- Nuxt.js v2.13.3
- Nuxt.js v2.14.6
Nuxt.js v2.13 からは dotenv がランタイム構成に含まれる
Nuxt.js v2.13 から dotenv がランタイム構成に含まれるようになりました。
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config
この機能によって .env ファイルをプラグインなしで自動で読み込んでくれます。
ただ、.env というディレクトリ 配下に development.js などで環境変数を設定している場合、
.env ディレクトリをファイルとして読み込こもうとしてエラーになります。
(ここでハマりました。。)
これの解消方法は、単純に環境変数を格納するディレクトリを .env
にしなければ大丈夫です。
環境変数をビルド後のソースコードから隠微できる(SSG のみ)
process.env や nuxt.config.js の env に環境変数を書いていた場合、
webpeck でコンパイルするとソースコードに残ってしまっていました。

これは v2.12 でも v2.13 でも同様です。
参考:
上記の https://nuxtjs.org/ の記事 と
NuxtのJamstack構成におけるAPIキーの隠蔽方法について
v2.13 から nuxt.config に publicRuntimeConfig と privateRuntimeConfig という項目が追加されました。
privateRuntimeConfig は SSG のときのみ利用され、フロントのソースには残りません。
フロントで使う環境変数を隠微したいとき
これで環境変数を隠微できたように見えますが、検索 API などフロントからは環境変数を使うときは privateRuntimeConfig が使えません。
Algolia の Application ID など、見えて困るものはサーバ側で処理を挟む必要があります。
参考:microCMSとNuxtでプレビュー画面を作成する_API-KEYを隠す方法
generate が v2.13 でなくなって v2.14 で復活した
Nuxt v2.12 では静的ビルドのコマンドが
$ nuxt generate
でしたが、v2.13 から
$ nuxt build && nuxt export
に変わりました。
それが v2.14 では再び
$ nuxt generate
で静的ビルドができるようになりました。
v2.14 で nuxt-property-decorator の watchQuery が使えなくなった?
これは見出しそのままなのですが、v2.13 で nuxt-property-decorator の watchQuery でクエリ変更を監視していたのですが、v2.14 の static ビルドでうまく動かなくなりました。
nuxt-property-decorator のバージョンは 2.8.8 で Nuxt.js v2.14 以降の版です。
解消方法が見当たらなかったので nuxt-property-decorator でなく
composition-api の watch でクエリを監視する方法で解消しました。
もしかしたら、ちゃんと解消方法があるのかもしれない(もしくは watchQuery 対応についてのドキュメントがあるかも)のですが、
見つけられずこのような対応になりました。
まとめ
Nuxt.js の v2.12 は長く安定していた記憶があるのですが、
v2.14 は周辺のプラグインの対応も含めて知識のアップデートが必要そうです。
内容が薄くてすみません