useRuntimeConfig

Исходный код
Доступ к переменным runtime-конфигурации через композабл useRuntimeConfig.

Использование

app.vue
<script setup lang="ts">
const config = useRuntimeConfig()
</script>
server/api/foo.ts
export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})
Узнать больше Docs > 3 X > Guide > Going Further > Runtime Config.

Определение runtime-конфигурации

Ниже заданы публичный базовый URL API и секретный токен, доступный только на сервере.

Переменные runtimeConfig задаются в nuxt.config.

nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Только на сервере
    apiSecret: '123',

    // Доступно и на клиенте
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api',
    },
  },
})
Секреты и значения, доступные только на сервере, объявляйте на верхнем уровне runtimeConfig. То, что должно быть доступно и в браузере, — внутри runtimeConfig.public.
Узнать больше Docs > 3 X > Guide > Going Further > Runtime Config.

Чтение runtime-конфигурации

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

  // Публичные поля
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Секрет только на сервере
      Authorization: `Bearer ${config.apiSecret}`,
    },
  })
  return result
})

Здесь apiBase из public виден и на сервере, и на клиенте, а apiSecret — только на сервере.

Переменные окружения

Значения runtimeConfig можно переопределять переменными окружения с префиксом NUXT_.

Узнать больше Docs > 3 X > Guide > Going Further > Runtime Config.

Файл .env

Переменные из .env подхватываются при разработке и сборке/prerender.

.env
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
Переменные из .env доступны в Nuxt при разработке и сборке через process.env.
В продакшене на сервере используйте переменные окружения платформы; файл .env обычно не подключается.
Узнать больше Docs > 3 X > Directory Structure > Env.

Пространство имён app

Nuxt резервирует runtimeConfig.app с полями вроде baseURL и cdnURL. Их можно задать через переменные окружения.

Это зарезервированное пространство имён: не добавляйте в app собственные ключи.

app.baseURL

По умолчанию baseURL равен '/'.

Его можно изменить в рантайме через NUXT_APP_BASE_URL, затем читать как config.app.baseURL:

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

  const baseURL = config.app.baseURL
})

app.cdnURL

Чтобы отдавать статику из .output/public через свой CDN, задайте NUXT_APP_CDN_URL и читайте config.app.cdnURL:

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

  const cdnURL = config.app.cdnURL
})
Узнать больше Docs > 3 X > Guide > Going Further > Runtime Config.