はじめに
nuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド（private）、クライアントサイド（frontend）で公開範囲を区別することもできる。本記事では、runtimeConfigの設定方法と使い方についてざっと整理する。
privateとpublic configuration
runtimeConfigの下に定義されているプロパティはprivate、publicやappブロックに定義された値はfrontendに公開される。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { defineNuxtConfig } from "nuxt"; export default defineNuxtConfig({ runtimeConfig: { apiKey: process.env.API_KEY, // private public: { frontendConfig: process.env.PUBLIC_FRONTEND_CONFIG, // frontendに公開 }, // app: { } // 内部nitro rendererで自動定義 frontendに公開 }, }); |
.envからの定義を渡す
nuxt.config.tsのruntimeConfigに定義することで利用できるが、よくやる方法として、.envに定義した値をruntimeConfigにセットするというアプローチがあるだろう。以下のような感じだ。
|
1 2 3 4 5 6 7 8 9 10 |
import { defineNuxtConfig } from "nuxt"; export default defineNuxtConfig({ runtimeConfig: { apiKey: process.env.API_KEY, public: { frontendConfig: process.env.PUBLIC_FRONTEND_CONFIG, }, }, }); |
この方法でも問題ないが、毎回.envの値をruntimeConfigにセットしない方法もある。次に、.envの特定の値を動的にruntimeConfigに反映する例を見てみる。
.envからの定義を動的に渡す
.envに特定のプリフィックスNUXT_またはNITRO_をつけた値は、runtimeConfigに定義されていればruntimeConfigに動的に設定されるようになっている。なお、この際runtimeConfigのjson構造の階層と合わせてやる必要がある。具体的な例を見てみる。
|
1 2 |
NUXT_API_KEY=nuxtApiKey NUXT_PUBLIC_FRONTEND_CONFIG=nitroFrontendConfig |
この定義を動的に読み込むためのnuxt.config.tsは以下のようになる。
|
1 2 3 4 5 6 7 8 9 10 11 |
import { defineNuxtConfig } from 'nuxt' // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config export default defineNuxtConfig({ runtimeConfig: { apiKey: '', // 定義していると上書きされる public: { frontendConfig: '' // 定義していると上書きされる } } } |
コンポーネントでは以下のようにアクセスできるだろう。
|
1 2 3 4 5 6 |
<template> <div> {{ $config.apiKey }} {{ $config.public.frontendConfig }} </div> </template> |
apiKeyはprivateなので見えない。frontendConfigはpublicのためフロントエンドで見える。ssrのレスポンスを見るとwindow.__NUXT__の定義のruntimeConfigプロパティとし見えるのが分かる。
NITRO_とNUXT_の両方が定義されている場合
NITRO_の優先順位が高くなっているので、両方定義されている場合はNITRO_の定義が勝つ。
|
1 2 3 4 5 |
NUXT_APP_API_KEY=nuxtApiKey # NUXT_よりもNITRO_の方が優先度が高い NITRO_PUBLIC_FRONTEND_CONFIG=nitroFrontendConfig NUXT_PUBLIC_FRONTEND_CONFIG=nuxtFrontendConfig |
独自のprefixを指定したい
NUXT_でなく、MYAPP_のような独自のprefixをつけたい場合は、以下のようにnitroのenvPrefixを書き換える。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { defineNuxtConfig } from "nuxt"; export default defineNuxtConfig({ runtimeConfig: { apiKey: process.env.API_KEY, public: { frontendConfig: "", }, nitro: { envPrefix: "MYAPP_", }, }, }); |
参考リンク
コメント