Runtime-конфиг

Раскрытие

Чтобы передать конфигурацию и переменные окружения остальным частям вашего приложения, вам нужно определить конфигурацию времени выполнения в файле nuxt.config, используя опцию runtimeConfig.

export default defineNuxtConfig({
  runtimeConfig: {
    // Приватные ключи, которые доступны только на стороне сервера
    apiSecret: '123',
    // Ключи, находящиеся в public, также будут открыты на стороне клиента
    public: {
      apiBase: '/api'
    }
  }
})

При добавлении apiBase в runtimeConfig.public, Nuxt добавляет его в полезную нагрузку каждой страницы. Мы можем универсально обращаться к apiBase как на сервере, так и в браузере.

const runtimeConfig = useRuntimeConfig()

console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)

Сериализация

Ваша конфигурация времени выполнения будет сериализована перед передачей в Nitro. Это означает, что все, что не может быть сериализовано и затем десериализовано (например, функции, Set, Map и так далее), не должно быть установлено в вашем nuxt.config.

Вместо того чтобы передавать несериализуемые объекты или функции в ваше приложение из вашего nuxt.config, вы можете поместить этот код в плагин или в middleware Nuxt или Nitro.

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

Наиболее распространенным способом обеспечения конфигурации является использование переменных окружения.

Значения конфигурации времени выполнения автоматически заменяются соответствующими переменными окружения во время выполнения.

Существует два ключевых требования:

1. Желаемые переменные должны быть определены в файле nuxt.config. Это гарантирует, что произвольные переменные окружения не попадут в код вашего приложения.
2. Только переменная окружения со специальным именем может переопределить свойство конфигурации времени выполнения. То есть, переменная окружения, начинающаяся с NUXT_ и использующая _ для разделения ключей и изменения регистра.

Пример

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // может быть переопределена переменной окружения NUXT_API_SECRET
    public: {
      apiBase: '', // может быть переопределена переменной окружения NUXT_PUBLIC_API_BASE
    }
  },
})

Чтение

Приложение Vue

Во Vue-части вашего приложения Nuxt вам нужно вызвать useRuntimeConfig(), чтобы получить доступ к конфигурации времени выполнения.

<script setup lang="ts">
const config = useRuntimeConfig()

console.log('Runtime-конфиг:', config)
if (import.meta.server) {
  console.log('API секрет:', config.apiSecret)
}
</script>

<template>
  <div>
    <div>Проверьте консоль разработчика!</div>
  </div>
</template>

Плагины

Если вы хотите использовать конфигурацию времени выполнения внутри любого (пользовательского) плагина, вы можете использовать useRuntimeConfig() внутри вашей функции defineNuxtPlugin.

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  console.log('Базовый URL API:', config.public.apiBase)
});

Серверные маршруты

Вы можете получить доступ к конфигурации времени выполнения и внутри маршрутов сервера, используя useRuntimeConfig.

export default defineEventHandler(async (event) => {
  const { apiSecret } = useRuntimeConfig(event)
  const result = await $fetch('https://my.api.com/test', {
    headers: {
      Authorization: `Bearer ${apiSecret}`
    }
  })
  return result
})

Типизация runtime-конфига

Nuxt пытается автоматически сгенерировать интерфейс typescript из предоставленного конфига времени выполнения, используя unjs/untyped.

Но можно также набрать свой конфиг вручную:

declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
  }
  interface PublicRuntimeConfig {
    apiBase: string
  }
}
// Всегда важно убедиться, что вы импортируете/экспортируете что-то при дополнении типа
export {}