Настройка

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

Настройка Nuxt

Файл nuxt.config.ts лежит в корне проекта и определяет (или дополняет) поведение приложения.

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

export default defineNuxtConfig({
  // Конфигурация Nuxt
})

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

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

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

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true },
    },
  },
  $development: {
    // Дополнительные настройки для режима разработки
  },
  $env: {
    staging: {
      // Дополнительные настройки для среды staging
    },
  },
})

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

Чтобы узнать больше о механизме, лежащем в основе этих переопределений, обратитесь к документации c12 по конфигурации, зависящей от окружения.

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

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

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

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

# Переопределяет apiSecret
NUXT_API_SECRET=api_secret_token

К ним обращаются из любого места приложения через композабл useRuntimeConfig().

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

Настройки приложения

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

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

export default defineAppConfig({
  title: 'Привет Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000',
    },
  },
})

Ими пользуется всё приложение через композабл useAppConfig.

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

runtimeConfig против app.config

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

• runtimeConfig: Приватные или публичные токены, которые необходимо указать после сборки с использованием переменных окружения.
• app.config: публичные значения, задаваемые на этапе сборки — тема, заголовок сайта и прочая несекретная настройка проекта.

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

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

Вот список других распространенных конфигурационных файлов:

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

С Vite

Если вам нужно передать опции в @vitejs/plugin-vue или @vitejs/plugin-vue-jsx, вы можете это сделать в файле nuxt.config.

• vite.vue для @vitejs/plugin-vue. Проверьте доступные опции.
• vite.vueJsx для @vitejs/plugin-vue-jsx. Проверьте доступные опции.

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true,
    },
    vueJsx: {
      mergeProps: true,
    },
  },
})

С webpack

Если вы используете webpack и вам нужно настроить vue-loader, вы можете использовать ключ webpack.loaders.vue внутри файла nuxt.config. Доступные опции указаны здесь.

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
})

Включить экспериментальные функции Vue

Может понадобиться включить экспериментальные возможности Vue, например propsDestructure. В 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 есть официальная интеграция.