Конфигурация времени выполнения

Раскрытие

Чтобы передать конфигурацию и переменные окружения остальным частям вашего приложения, вам нужно определить конфигурацию времени выполнения в файле 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('Конфигурация времени выполнения:', 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
})

Типизация конфигурации времени выполнения

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

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

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