runtimeConfig」タグアーカイブ

code on a screen

Nuxt3のruntimeConfigで環境変数を設定する

はじめに

nuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド(private)、クライアントサイド(frontend)で公開範囲を区別することもできる。本記事では、runtimeConfigの設定方法と使い方についてざっと整理する。

privateとpublic configuration

runtimeConfigの下に定義されているプロパティはprivate、publicやappブロックに定義された値はfrontendに公開される。

.envからの定義を渡す

nuxt.config.tsのruntimeConfigに定義することで利用できるが、よくやる方法として、.envに定義した値をruntimeConfigにセットするというアプローチがあるだろう。以下のような感じだ。

この方法でも問題ないが、毎回.envの値をruntimeConfigにセットしない方法もある。次に、.envの特定の値を動的にruntimeConfigに反映する例を見てみる。

.envからの定義を動的に渡す

.envに特定のプリフィックスNUXT_またはNITRO_をつけた値は、runtimeConfigに定義されていればruntimeConfigに動的に設定されるようになっている。なお、この際runtimeConfigのjson構造の階層と合わせてやる必要がある。具体的な例を見てみる。

この定義を動的に読み込むためのnuxt.config.tsは以下のようになる。

コンポーネントでは以下のようにアクセスできるだろう。

apiKeyはprivateなので見えない。frontendConfigはpublicのためフロントエンドで見える。ssrのレスポンスを見るとwindow.__NUXT__の定義のruntimeConfigプロパティとし見えるのが分かる。

NITRO_とNUXT_の両方が定義されている場合

NITRO_の優先順位が高くなっているので、両方定義されている場合はNITRO_の定義が勝つ。

独自のprefixを指定したい

NUXT_でなく、MYAPP_のような独自のprefixをつけたい場合は、以下のようにnitroのenvPrefixを書き換える。

参考リンク