Настройка · Начните работать с 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
: {
    //
  },
  $env
: {
    staging
: {
      // 
    }
  },
})

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

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

Посмотрите видео от Александра Лихтера о переменных окружения в 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: Публичные токены, которые определяются во время сборки, конфигурация веб-сайта - например, тема, заголовок и любая конфигурация проекта, которая не является конфиденциальной.

Feature	`runtimeConfig`	`app.config`
Сторона клиента	Гидратация	Вместе со сборкой
Переменные среды	✅ Да	❌ Нет
Реактивность	✅ Да	✅ Да
Поддержка типов	✅ Частично	✅ Да
Конфигурация по запросу	❌ Нет	✅ Да
Горячая замена модулей (HMR)	❌ Нет	✅ Да
Непримитивные типы 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`

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

Имя	Файл конфигурации	Как настроить
TypeScript	`tsconfig.json`	Больше информации
ESLint	`eslint.config.js`	Больше информации
Prettier	`.prettierrc.json`	Больше информации
Stylelint	`.stylelintrc.json`	Больше информации
TailwindCSS	`tailwind.config.js`	Больше информации
Vitest	`vitest.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.

Установка

Начните работать с Nuxt мгновенно с нашими онлайн песочницами или запустите проект локально с помощью терминала.

Views

Nuxt предоставляет несколько компонентных слоев для реализации пользовательского интерфейса вашего приложения.