Настройки и переменные окружения

Некоторые значения отличаются на вашем компьютере и на рабочем сервере: ключи API, пароли, адрес сайта. Их не пишут прямо в код, а задают переменными окружения — значениями, которые операционная система передаёт запущенной программе. В Nuxt такие настройки описывают в разделе runtimeConfig файла nuxt.config.ts.

Описание настроек

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  runtimeConfig: {
    adminPassword: '',
    public: {
      siteName: 'Мой блог'
    }
  }
})

Значения в nuxt.config.ts — это значения по умолчанию. Ключи верхнего уровня (adminPassword) доступны только на сервере. Ключи внутри public видны и в браузере.

Файл .env

Создайте в корне проекта файл .env:

NUXT_ADMIN_PASSWORD=secret123
NUXT_PUBLIC_SITE_NAME="Блог Анны"

Nuxt сопоставляет переменные с настройками по имени: приставка NUXT_, затем имя ключа заглавными буквами со знаками подчёркивания между словами. NUXT_PUBLIC_ относится к разделу public. Перезапустите npm run dev, чтобы Nuxt прочитал файл. Добавьте .env в .gitignore: пароли не должны попасть в репозиторий.

Чтение на сервере

// server/api/admin/check.post.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig(event)
  const body = await readBody<{ password?: string }>(event)
 
  if (body.password !== config.adminPassword) {
    throw createError({ statusCode: 401, message: 'Неверный пароль' })
  }
 
  return { ok: true }
})

useRuntimeConfig(event) возвращает все настройки. Запрос с паролем secret123 получит { ok: true }, с другим — ошибку 401.

Чтение в компонентах

<!-- app/layouts/default.vue -->
<script setup lang="ts">
const config = useRuntimeConfig()
</script>
 
<template>
  <header>
    <NuxtLink to="/">{{ config.public.siteName }}</NuxtLink>
  </header>
</template>

В шапке появится «Блог Анны» из .env. Попытка прочитать config.adminPassword в браузере вернёт undefined: секретные ключи туда не передаются.

runtimeConfig и appConfig

Где	Для чего
`runtimeConfig`	Значения, которые меняются переменными окружения, в том числе секреты
`app/app.config.ts`	Публичные настройки оформления, известные при сборке: цвета, тексты

.env на рабочем сервере

Файл .env читается только при разработке, сборке и npm run preview. На рабочем сервере переменные задают средствами хостинга или при запуске: NUXT_ADMIN_PASSWORD=... node .output/server/index.mjs.

Частая ошибка

Положить секрет в раздел public: public: { apiKey: '...' }. Всё, что лежит в public, попадает в HTML и в JavaScript, который скачивает любой посетитель. Ключи API и пароли держите на верхнем уровне runtimeConfig и используйте только в папке server/.

Спасибо, что читаете!