ランタイム構成
Nuxt にはアプリケーション内で構成と秘密を公開するためのランタイム構成 API が用意されています。
runtimeConfig オプションを使用する場合、nitro が構成されている必要があります。ランタイム構成の更新
Nuxt 3 では、新しい runtimeConfig オプションを組み合わせることで、Nuxt 2 とは異なるアプローチでランタイム構成が行われます。
最初に、publicRuntimeConfig プロパティと privateRuntimeConfig プロパティを、public と呼ばれるキー内のパブリック構成を含む runtimeConfig という新しい 1 つに結合する必要があります。
// nuxt.config.js
- privateRuntimeConfig: {
- apiKey: process.env.NUXT_API_KEY || 'super-secret-key'
- },
- publicRuntimeConfig: {
- websiteURL: 'https://public-data.com'
- }
+ runtimeConfig: {
+ apiKey: process.env.NUXT_API_KEY || 'super-secret-key',
+ public: {
+ websiteURL: 'https://public-data.com'
+ }
+ }
これは、パブリックランタイム構成にアクセスする必要がある場合は、public と呼ばれるプロパティの後に配置されることも意味します。パブリックランタイム構成を使用する場合は、コードを更新する必要があります。
// MyWidget.vue
- <div>Website: {{ $config.websiteURL }}</div>
+ <div>Website: {{ $config.public.websiteURL }}</div>