Learn Nuxt with a Collection of 100+ Tips!

Настройка

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

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

Настройка Nuxt

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

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

nuxt.config.ts
export default 
defineNuxtConfig
({
// Ваша конфигурация Nuxt })

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

Каждая опция настройки описана в Configuration Reference.
Вам не обязательно использовать TypeScript, чтобы создать приложение с Nuxt. Однако, очень рекомендуется использовать расширение .ts для файла nuxt.config. Таким образом, вы можете воспользоваться подсказками в IDE, чтобы избежать опечаток и ошибок при изменении конфигурации.

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

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

nuxt.config.ts
export default 
defineNuxtConfig
({
$production
: {
routeRules
: {
'/**': {
isr
: true }
} },
$development
: {
// } })
Посмотрите видео от Александра Лихтера о переменных окружения в nuxt.config.ts.
Если вы создаете слои, вы также можете использовать ключ $meta для предоставления метаданных, которые вы или пользователи вашего слоя можете использовать.

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

API runtimeConfig предоставляет значения, такие как переменные окружения, для всего остального вашего приложения. По умолчанию эти ключи доступны только на сервере. Но ключи в runtimeConfig.public доступны также и на клиенте.

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

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

Эти переменные станут доступны для всего приложения с помощью композабла useRuntimeConfig().

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

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

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

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

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

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

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

runtimeConfig против app.config

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

  • runtimeConfig: Приватные или публичные токены, которые необходимо указать после сборки с использованием переменных окружения.
  • app.config: Публичные токены, которые определяются во время сборки, конфигурация веб-сайта - например, тема, заголовок и любая конфигурация проекта, которая не является конфиденциальной.
FeatureruntimeConfigapp.config
Сторона клиентаГидратацияВместе со сборкой
Переменные среды✅ Да❌ Нет
Реактивность✅ Да✅ Да
Поддержка типов✅ Частично✅ Да
Конфигурация по запросу❌ Нет✅ Да
Горячая замена модулей (HMR)❌ Нет✅ Да
Непримитивные типы JS❌ Нет✅ Да

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

Nuxt использует файл nuxt.config.ts как единственный источник истины и пропускает чтение внешних файлов конфигурации. В процессе создания вашего проекта вам может потребоваться настроить их. В следующей таблице представлены общие конфигурации и, где это применимо, как их можно настроить с помощью 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Больше информации
Prettier.prettierrc.jsonБольше информации
Stylelint.stylelintrc.jsonБольше информации
TailwindCSStailwind.config.jsБольше информации
Vitestvitest.config.tsБольше информации

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

С Vite

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

  • vite.vue для @vitejs/plugin-vue. Проверьте доступные опции здесь.
  • vite.vueJsx для @vitejs/plugin-vue-jsx. Проверьте доступные опции здесь.
nuxt.config.ts
export default 
defineNuxtConfig
({
vite
: {
vue
: {
customElement
: true
},
vueJsx
: {
mergeProps
: true
} } })
Узнать больше Docs > 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 > API > Configuration > Nuxt Config#loaders.

Включить экспериментальные функции 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 Macros, который имеет Интеграцию с Nuxt.

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