useRuntimeConfig

Source
Доступ к переменным runtime-конфига через компосабл 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.

Определение 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 > 4 X > Guide > Going Further > Runtime Config.

Доступ к runtime-конфигу

Для доступа используйте компосабл useRuntimeConfig():

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 только на сервере.

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

Значения runtime-конфига можно переопределить переменными окружения с префиксом 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 при разработке и сборке/генерации.
В production runtime используйте переменные окружения платформы; .env не используется.
Узнать больше Docs > 4 X > Directory Structure > Env.

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

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

Это зарезервированное пространство; не добавляйте в него свои ключи.

app.baseURL

По умолчанию baseURL — '/'.

Изменить можно через переменную окружения NUXT_APP_BASE_URL. Значение доступно как config.app.baseURL:

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

  // baseURL доступен везде
  const baseURL = config.app.baseURL
})

app.cdnURL

Пример настройки своего CDN-URL и доступа через useRuntimeConfig().

Для раздачи статики из .output/public через свой CDN используйте переменную NUXT_APP_CDN_URL. URL доступен как config.app.cdnURL.

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

  // cdnURL доступен везде
  const cdnURL = config.app.cdnURL
})
Узнать больше Docs > 4 X > Guide > Going Further > Runtime Config.