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

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

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

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

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

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

// nuxt.config.ts

export default defineNuxtConfig({
  // Моя конфигурация Nuxt.js
})

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

Для создания приложения с помощью 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 и могут быть переопределены с помощью переменных окружения.

// nuxt.config.ts

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

# .env

# Это переопределит значение apiSecret
NUXT_API_SECRET=api_secret_token

Эти переменные доступны для остальной части вашего приложения с помощью компонуемой функции useRuntimeConfig().

<!-- app/pages/index.vue -->

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

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

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

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

// app/app.config.ts

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

Эти переменные доступны для остальной части вашего приложения с помощью компонуемого компонента useAppConfig.

<!-- app/pages/index.vue -->

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

runtimeConfig против app.config

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

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

Особенность	`runtimeConfig`	`app.config`
Клиентская часть	Гидрация	Пакет
Переменные окружения	Да	Нет
Реактивность	Да	Да
Поддержка типов	Частично	Да
Конфигурация по запросу	Нет	Да
Горячая замена модулей	Нет	Да
Непримитивные типы JS	Нет	Да

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

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

Имя	Конфигурационный файл	Как настроить
Nitro	`nitro.config.ts`	Используйте ключ `nitro` в файле `nuxt.config`
PostCSS	`postcss.config.js`	Используйте ключ `postcss` в `nuxt.config`
Vite	`vite.config.ts`	Используйте ключ `vite` в `nuxt.config`
webpack	`webpack.config.ts`	Используйте ключ `webpack` в файле `nuxt.config`

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

Имя Конфигурационный файл Как настроить

tsconfig.json

eslint.config.js

prettier.config.js

stylelint.config.js

TailwindCSS

tailwind.config.js

Vitest

файл vitest.config.ts

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

С помощью Vite

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

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

// nuxt.config.ts

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

С помощью webpack

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

// nuxt.config.ts

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

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

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