Конфигурация

Nuxt настроен разумными значениями по умолчанию для продуктивной работы.

По умолчанию Nuxt настроен под большинство сценариев. Файл nuxt.config.ts позволяет переопределить или расширить эту конфигурацию.

Конфигурация Nuxt

Файл nuxt.config.ts находится в корне проекта Nuxt и может переопределять или расширять поведение приложения.

Минимальный конфиг экспортирует функцию defineNuxtConfig с объектом конфигурации. Хелпер defineNuxtConfig доступен глобально без импорта.

nuxt.config.ts
export default defineNuxtConfig({
  // My Nuxt config
})

Этот файл часто упоминается в документации — например, для добавления скриптов, регистрации модулей или смены режимов рендеринга.

Все опции описаны в справочнике конфигурации.
Для сборки приложения на Nuxt TypeScript не обязателен. Всё же рекомендуется использовать расширение .ts для файла nuxt.config: так в IDE будут подсказки и меньше опечаток при редактировании.

Переопределения по окружению

В nuxt.config можно задать типизированные переопределения для каждого окружения:

nuxt.config.ts
export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true },
    },
  },
  $development: {
    //
  },
  $env: {
    staging: {
      //
    },
  },
})

Чтобы выбрать окружение при запуске команды Nuxt CLI, передайте имя в флаг --envName, например: nuxt build --envName staging.

Подробнее о механизме переопределений — в документации c12 (конфигурация по окружениям).

При создании слоёв можно также использовать ключ $meta для метаданных, которые будут доступны вам или потребителям слоя.

Переменные окружения и приватные токены

API runtimeConfig пробрасывает в приложение значения вроде переменных окружения. По умолчанию эти ключи доступны только на сервере. Ключи в runtimeConfig.public и runtimeConfig.app (используется Nuxt внутренне) доступны и на клиенте.

Значения задаются в nuxt.config и могут переопределяться переменными окружения.

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

В приложении эти переменные доступны через композабл useRuntimeConfig().

app/pages/index.vue
<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>
Узнать больше Docs > 4 X > Guide > Going Further > Runtime Config.

Конфигурация приложения

Файл app.config.ts в исходной директории (по умолчанию app/) задаёт публичные переменные, определяемые на этапе сборки. В отличие от runtimeConfig, их нельзя переопределить переменными окружения.

Минимальный конфиг экспортирует функцию defineAppConfig с объектом конфигурации. Хелпер defineAppConfig доступен глобально без импорта.

app/app.config.ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000',
    },
  },
})

В приложении эти переменные доступны через композабл useAppConfig.

app/pages/index.vue
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
Узнать больше Docs > 4 X > Directory Structure > App > App Config.

runtimeConfig и app.config

Как уже сказано, и runtimeConfig, и app.config используются для передачи переменных в приложение. Кратко, когда что использовать:

  • runtimeConfig: приватные или публичные токены, которые нужно задать после сборки через переменные окружения.
  • app.config: публичные значения, фиксируемые на этапе сборки — тема, заголовок и прочая нечувствительная конфигурация.
ВозможностьruntimeConfigapp.config
На клиентеГидрацияВ бандле
Переменные окружения✅ Да❌ Нет
Реактивность✅ Да✅ Да
Поддержка типов✅ Частично✅ Да
Конфиг на запрос❌ Нет✅ Да
Hot module replacement❌ Нет✅ Да
Непримитивные типы JS❌ Нет✅ Да

Внешние конфигурационные файлы

Nuxt использует nuxt.config.ts как единственный источник правды и не читает отдельные внешние конфиги. При сборке может понадобиться настроить и их. Ниже — типичные конфиги и как их задать в Nuxt.

ИмяКонфиг-файлКак настроить в Nuxt
Nitronitro.config.tsКлюч nitro в nuxt.config
PostCSSpostcss.config.jsКлюч postcss в nuxt.config
Vitevite.config.tsКлюч vite в nuxt.config
webpackwebpack.config.tsКлюч webpack в nuxt.config

Другие распространённые конфиги:

ИмяКонфиг-файлДокументация
TypeScripttsconfig.jsonПодробнее
ESLinteslint.config.jsПодробнее
Prettierprettier.config.jsПодробнее
Stylelintstylelint.config.jsПодробнее
TailwindCSStailwind.config.jsПодробнее
Vitestvitest.config.tsПодробнее

Конфигурация Vue

С Vite

Опции для @vitejs/plugin-vue или @vitejs/plugin-vue-jsx задаются в nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true,
    },
    vueJsx: {
      mergeProps: true,
    },
  },
})
Узнать больше Docs > 4 X > API > Configuration > Nuxt Config#vue.

С webpack

При использовании webpack настройка vue-loader задаётся ключом webpack.loaders.vue в nuxt.config. Опции описаны здесь.

nuxt.config.ts
export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
})
Узнать больше Docs > 4 X > API > Configuration > Nuxt Config#loaders.

Экспериментальные возможности Vue

Экспериментальные возможности Vue (например propsDestructure) можно включить в nuxt.config.ts независимо от сборщика:

nuxt.config.ts
export default defineNuxtConfig({
  vue: {
    propsDestructure: true,
  },
})

Миграция экспериментального reactivityTransform с Vue 3.4 и Nuxt 3.9

Начиная с Nuxt 3.9 и Vue 3.4, reactivityTransform перенесён из Vue в Vue Macros, для которого есть интеграция с Nuxt.

Узнать больше Docs > 4 X > API > Configuration > Nuxt Config#vue 1.