useRuntimeConfig

ソース
useRuntimeConfig コンポーザブルを使用して、ランタイム設定変数にアクセスします。

使用方法

app/app.vue
<script setup lang="ts">
const config = useRuntimeConfig()
</script>
server/api/foo.ts
export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})
Docs > 4 X > Guide > Going Further > Runtime Configで詳細をお読みください。

ランタイム設定の定義

以下の例は、公開 API ベース URL と、サーバー上でのみアクセス可能な秘密 API トークンを設定する方法を示しています。

runtimeConfig 変数は常に nuxt.config 内で定義する必要があります。

nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys are only available on the server
    apiSecret: '123',

    // Public keys that are exposed to the client
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api',
    },
  },
})
サーバーでアクセスする必要がある変数は、runtimeConfig 内に直接追加されます。クライアントとサーバーの両方でアクセスする必要がある変数は、runtimeConfig.public で定義されます。
Docs > 4 X > Guide > Going Further > Runtime Configで詳細をお読みください。

ランタイム設定へのアクセス

ランタイム設定にアクセスするには、useRuntimeConfig() コンポーザブルを使用できます。

server/api/test.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig(event)

  // Access public variables
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Access a private variable (only available on the server)
      Authorization: `Bearer ${config.apiSecret}`,
    },
  })
  return result
})

この例では、apiBase は public 名前空間内で定義されているため、サーバー側とクライアント側の両方で普遍的にアクセスできますが、apiSecret はサーバー側でのみアクセス可能です。

環境変数

NUXT_ をプレフィックスとする一致する環境変数名を使用することで、ランタイム設定の値を更新することが可能です。

Docs > 4 X > Guide > Going Further > Runtime Configで詳細をお読みください。

.env ファイルの使用

.env ファイル内に環境変数を設定することで、開発中およびビルド/生成時にアクセスできるようになります。

.env
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
.env ファイル内で設定された環境変数は、開発中およびビルド/生成時に Nuxt アプリで process.env を使用してアクセスされます。
プロダクションランタイムでは、プラットフォーム環境変数を使用する必要があり、.env は使用されません。
詳細は Docs > 4 X > Guide > Directory Structure > Env を参照してください。

app 名前空間

Nuxt は、baseURL と cdnURL を含むキーを持つランタイム設定で app 名前空間を使用します。環境変数を設定することで、実行時にそれらの値をカスタマイズできます。

これは予約された名前空間です。app 内に新しいキーを追加すべきではありません。

app.baseURL

デフォルトでは、baseURL は '/' に設定されています。

ただし、baseURL は NUXT_APP_BASE_URL を環境変数として設定することで、実行時に更新できます。

その後、config.app.baseURL を使用してこの新しいベース URL にアクセスできます。

/plugins/my-plugin.ts
export default defineNuxtPlugin((NuxtApp) => {
  const config = useRuntimeConfig()

  // Access baseURL universally
  const baseURL = config.app.baseURL
})

app.cdnURL

この例は、カスタム CDN URL を設定し、useRuntimeConfig() を使用してそれにアクセスする方法を示しています。

NUXT_APP_CDN_URL 環境変数を使用して、.output/public 内の静的アセットを提供するカスタム CDN を使用できます。

そして、config.app.cdnURL を使用して新しい CDN URL にアクセスします。

server/api/foo.ts
export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Access cdnURL universally
  const cdnURL = config.app.cdnURL
})
Docs > 4 X > Guide > Going Further > Runtime Configで詳細をお読みください。