5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.js v2.12 から v2.13 / v2.14 へのバージョンアップ注意点

Posted at

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 でコンパイルするとソースコードに残ってしまっていました。

スクリーンショット 2020-08-06 14.49.38.png

これは v2.12 でも v2.13 でも同様です。

参考:
上記の https://nuxtjs.org/ の記事
NuxtのJamstack構成におけるAPIキーの隠蔽方法について

v2.13 から nuxt.config に publicRuntimeConfigprivateRuntimeConfig という項目が追加されました。
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 は周辺のプラグインの対応も含めて知識のアップデートが必要そうです。

内容が薄くてすみません:bow:

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?