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

Узнайте обо всех опциях, которые можно использовать в файле nuxt.config.ts.

alias

Дополнительные алиасы для доступа к своим директориям из JavaScript и CSS улучшают опыт разработки.

Тип: object
По умолчанию

{
  "~": "/<rootDir>/app",
  "@": "/<rootDir>/app",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "#server": "/<rootDir>/server",
  "assets": "/<rootDir>/app/assets",
  "public": "/<rootDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}

Примечание: В контексте webpack (источники изображений, CSS — но не JavaScript) алиас нужно указывать с префиксом ~.

Примечание: Эти алиасы автоматически попадают в сгенерированные конфиги TypeScript (.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json и т.д.) для поддержки типов и автодополнения путей. Чтобы расширить опции сгенерированных конфигов, добавьте их здесь или в typescript.tsConfig в nuxt.config.

Пример:

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url)),
  },
})

<template>
  <img src="~images/main-bg.jpg">
</template>

<script>
import data from 'data/test.json'
</script>

<style>
// Uncomment the below
//@import '~style/variables.scss';
//@import '~style/utils.scss';
//@import '~style/base.scss';
body {
  background-image: url('~images/main-bg.jpg');
}
</style>

analyzeDir

Директория, в которую Nuxt сохраняет сгенерированные файлы при запуске nuxt analyze.

При относительном пути он задаётся относительно rootDir.

Тип: string
По умолчанию: "/<rootDir>/.nuxt/analyze"

app

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

`baseURL`

Базовый путь приложения Nuxt.

Например:

Тип: string
По умолчанию: "/"

Пример:

export default defineNuxtConfig({
  app: {
    baseURL: '/prefix/',
  },
})

Можно также задать в runtime переменной окружения NUXT_APP_BASE_URL.

Пример:

NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs

`buildAssetsDir`

Имя папки собранных ресурсов сайта относительно baseURL (или cdnURL, если задан). Задаётся при сборке, в runtime менять не рекомендуется.

Тип: string
По умолчанию: "/_nuxt/"

`cdnURL`

Абсолютный URL для раздачи папки public (только production).

Например:

Тип: string
По умолчанию: ""

Пример:

export default defineNuxtConfig({
  app: {
    cdnURL: 'https://mycdn.org/',
  },
})

В runtime можно задать через переменную окружения NUXT_APP_CDN_URL.

Пример:

NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs

`head`

Конфигурация по умолчанию для <head> на каждой странице.

Тип: object
По умолчанию

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

Пример:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      script: [
      // <script src="https://myawesome-lib.js"></script>
        { src: 'https://awesome-lib.js' },
      ],
      link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
        { rel: 'stylesheet', href: 'https://awesome-lib.css' },
      ],
      // примечание: эта область может измениться
      style: [
      // <style>:root { color: red }</style>
        { textContent: ':root { color: red }' },
      ],
      noscript: [
      // <noscript>JavaScript is required</noscript>
        { textContent: 'JavaScript is required' },
      ],
    },
  },
})

`keepalive`

Значения по умолчанию для настройки KeepAlive между страницами.

Можно переопределить через definePageMeta на отдельной странице. Допускаются только JSON-сериализуемые значения.

Тип: boolean
По умолчанию: false

См.: Vue KeepAlive

`layoutTransition`

Значения по умолчанию для переходов между макетами.

Можно переопределить через definePageMeta на отдельной странице. Допускаются только JSON-сериализуемые значения.

Тип: boolean | TransitionProps
По умолчанию: false

См.: Vue Transition docs

`pageTransition`

Значения по умолчанию для переходов между страницами.

Можно переопределить через definePageMeta на отдельной странице. Допускаются только JSON-сериализуемые значения.

Тип: boolean | TransitionProps
По умолчанию: false

См.: Vue Transition docs

`rootAttrs`

Идентификатор корневого элемента Nuxt.

Тип: object
По умолчанию

{
  "id": "__nuxt"
}

`rootId`

Идентификатор корневого элемента Nuxt.

Тип: string
По умолчанию: "__nuxt"

`rootTag`

Тег корневого элемента Nuxt.

Тип: string
По умолчанию: "div"

`spaLoaderAttrs`

Атрибуты элемента шаблона загрузки SPA.

Тип: object
По умолчанию:

{
"id": "__nuxt-loader"
}

`id`

Тип: string
По умолчанию: "__nuxt-loader"

`spaLoaderTag`

Тег элемента SpaLoader.

Тип: string
По умолчанию: "div"

`teleportAttrs`

Атрибуты элемента Nuxt Teleport.

Тип: object
По умолчанию

{
  "id": "teleports"
}

`teleportId`

Идентификатор элемента Nuxt Teleport.

Тип: string
По умолчанию: "teleports"

`teleportTag`

Тег элемента Nuxt Teleport.

Тип: string
По умолчанию: "div"

`viewTransition`

Значения по умолчанию для view transitions.

Действует только при включённой в nuxt.config поддержке experimental View Transitions. Можно переопределить через definePageMeta на отдельной странице.

Тип: boolean
По умолчанию: false

См.: Nuxt View Transition API docs

appConfig

Дополнительная конфигурация приложения.

Для программного доступа и поддержки типов можно задать app config этой опцией. Значения сольются с файлом app.config как значения по умолчанию.

`nuxt`

appId

Для мульти-приложений — уникальный идентификатор приложения Nuxt.

По умолчанию: nuxt-app.

Тип: string
По умолчанию: "nuxt-app"

build

Общая конфигурация сборки.

`analyze`

Визуализация бандлов и подсказки по оптимизации.

Установите true для включения анализа бандлов или передайте объект с опциями: для webpack или для vite.

Тип: object
По умолчанию

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

Пример:

export default defineNuxtConfig({
  analyze: {
    analyzerMode: 'static',
  },
})

`templates`

Рекомендуется использовать addTemplate из @nuxt/kit вместо этой опции.

Тип: array

Пример:

export default defineNuxtConfig({
  build: {
    templates: [
      {
        src: '~~/modules/support/plugin.js', // `src` can be absolute or relative
        dst: 'support.js', // `dst` is relative to project `.nuxt` dir
      },
    ],
  },
})

`transpile`

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

Можно передать функцию для условной транспиляции; она получит объект ({ isDev, isServer, isClient, isModern, isLegacy }).

Тип: array

Пример:

export default defineNuxtConfig({
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky'],
  },
})

buildDir

Каталог, куда помещаются собранные файлы Nuxt.

Многие инструменты считают .nuxt скрытым каталогом (из-за точки в начале). При необходимости эту опцию можно использовать, чтобы изменить имя.

Тип: string
По умолчанию: "/<rootDir>/.nuxt"

Пример:

export default defineNuxtConfig({
  buildDir: 'nuxt-build',
})

buildId

Уникальный идентификатор сборки. Может содержать хеш текущего состояния проекта.

Тип: string
По умолчанию: "4a2e2d30-418f-41df-8e58-ed5df06de7fd"

builder

Сборщик для бандлинга Vue-части приложения.

Nuxt поддерживает несколько сборщиков для клиента. По умолчанию используется Vite; можно переключиться на webpack, Rspack или указать свой сборщик.

Тип: 'vite' | 'webpack' | 'rspack' | string | { bundle: (nuxt: Nuxt) => Promise<void> }
По умолчанию: "@nuxt/vite-builder"

Поддерживаемые сборщики:

export default defineNuxtConfig({
  // default - uses @nuxt/vite-builder
  // builder: 'vite',

  // uses @nuxt/webpack-builder
  // builder: 'webpack',

  // uses @nuxt/rspack-builder
  builder: 'rspack',
})

При использовании webpack или rspack нужно явно установить в проекте @nuxt/webpack-builder или @nuxt/rspack-builder.

Кастомный сборщик (объект):

Можно передать объект с функцией bundle:

export default defineNuxtConfig({
  builder: {
    async bundle (nuxt) {
      const entry = await resolvePath(resolve(nuxt.options.appDir, 'entry'))

      // Build client and server bundles
      await buildClient(nuxt, entry)
      if (nuxt.options.ssr) {
        await buildServer(nuxt, entry)
      }

      // ... it's a bit more complicated than that, of course!
    },
  },
})

Кастомный сборщик (пакет):

Пакет должен экспортировать функцию bundle. Имя пакета можно указать в nuxt.config.ts:

export default defineNuxtConfig({
  builder: 'my-custom-builder',
})

compatibilityDate

Дата совместимости для приложения.

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

components

Настройка авторегистрации компонентов Nuxt.

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

Тип: object
По умолчанию

{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

См.: app/components/ directory documentation

css

Глобальные CSS-файлы, модули или библиотеки (подключаются на каждой странице).

Nuxt определит тип по расширению и подключит нужный препроцессор. При необходимости установите соответствующий лоадер.

Тип: array

Пример:

export default defineNuxtConfig({
  css: [
  // Подключить Node.js-модуль напрямую (здесь — Sass).
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss',
  ],
})

debug

Включить режим отладки (true).

Сейчас выводит имена и время хуков на сервере и логирует аргументы хуков в браузере. Можно передать объект для включения отдельных опций отладки.

Тип: boolean
По умолчанию: false

dev

Режим разработки Nuxt.

Обычно задавать вручную не требуется.

Тип: boolean
По умолчанию: false

devServer

`cors`

Опции CORS для dev-сервера

`origin`

Тип: array
По умолчанию

[
  {}
]

`host`

Хост dev-сервера

`https`

Включить HTTPS.

Тип: boolean
По умолчанию: false

Пример:

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt',
    },
  },
})

`loadingTemplate`

Шаблон экрана загрузки

Тип: function

`port`

Порт dev-сервера

Тип: number
По умолчанию: 3000

`url`

URL dev-сервера.

Задавать вручную не нужно — он подставляется сервером (для модулей и внутреннего использования).

Тип: string
По умолчанию: "http://localhost:3000"

devServerHandlers

Обработчики сервера Nitro только для режима разработки.

Тип: array

См.: Nitro server routes documentation

devtools

Включить Nuxt DevTools в режиме разработки.

Breaking changes в devtools могут не совпадать с версией Nuxt.

См.: Nuxt DevTools для дополнительной информации.

dir

Настройка структуры каталогов по умолчанию.

Лучше оставлять значения по умолчанию, если нет особой необходимости.

`app`

Тип: string
По умолчанию: "app"

`assets`

Каталог ресурсов (алиас ~assets в сборке).

Тип: string
По умолчанию: "app/assets"

`layouts`

Каталог макетов; каждый файл автоматически регистрируется как макет Nuxt.

Тип: string
По умолчанию: "app/layouts"

`middleware`

Каталог middleware; каждый файл автоматически регистрируется как middleware Nuxt.

Тип: string
По умолчанию: "app/middleware"

`modules`

Каталог модулей; каждый файл автоматически регистрируется как модуль Nuxt.

Тип: string
По умолчанию: "modules"

`pages`

Каталог, из которого генерируются маршруты страниц приложения.

Тип: string
По умолчанию: "app/pages"

`plugins`

Каталог плагинов; каждый файл автоматически регистрируется как плагин Nuxt.

Тип: string
По умолчанию: "app/plugins"

`public`

Каталог статических файлов; доступен через сервер Nuxt и копируется в dist при сборке.

Тип: string
По умолчанию: "public"

`shared`

Общий каталог для приложения и сервера.

Тип: string
По умолчанию: "shared"

esbuild

`options`

Общие опции esbuild для Nuxt и для других сборщиков (Vite, webpack).

`jsxFactory`

Тип: string
По умолчанию: "h"

`jsxFragment`

Тип: string
По умолчанию: "Fragment"

`target`

Тип: string
По умолчанию: "esnext"

`tsconfigRaw`

Тип: object

experimental

Подробнее об экспериментальных возможностях Nuxt.

extends

Расширение проекта из нескольких локальных или удалённых источников.

Значение — строка или массив строк (пути к каталогам или конфигам относительно текущего). Поддерживаются префиксы: github:, gh:, gitlab:, bitbucket:.

См.: c12 docs on extending config layers

См.: giget documentation

extensions

Расширения файлов, разрешаемые резолвером Nuxt.

Тип: array
По умолчанию

[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Подробнее об опциональных возможностях Nuxt.

future

Подробнее о включении новых возможностей, которые станут стандартными в будущей (возможно мажорной) версии.

hooks

Хуки — подписчики на события Nuxt; обычно используются в модулях, доступны и в nuxt.config.

Имена хуков задаются через двоеточие (например, build:done). В конфиге их можно описать иерархическим объектом (см. пример ниже).

Пример:

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  hooks: {
    build: {
      done (builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file',
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      },
    },
  },
})

ignore

Гибче, чем ignorePrefix: при сборке игнорируются все файлы, подходящие под glob-паттерны из массива ignore.

Тип: array
По умолчанию

[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/*.d.vue.{cts,mts,ts}",
  "**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
  "**/*.sock",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

Опции, передаваемые в node-ignore (Nuxt использует его для игнорирования файлов).

См.: node-ignore

Пример:

export default defineNuxtConfig({
  ignoreOptions: {
    ignorecase: false,
  },
})

ignorePrefix

Файлы в app/pages/, app/layouts/, app/middleware/ и public/, чьи имена начинаются с указанного префикса, при сборке игнорируются. По умолчанию префикс -, игнорируются файлы, начинающиеся с -.

Тип: string
По умолчанию: "-"

imports

Настройка автоимпорта композаблов в приложение.

См.: Nuxt documentation

`dirs`

Массив кастомных директорий для автоимпорта. Эта опция не переопределяет стандартные директории (~/composables, ~/utils).

Тип: array

Пример:

export default defineNuxtConfig({
  imports: {
  // Auto-import pinia stores defined in `~/stores`
    dirs: ['stores'],
  },
})

`global`

Тип: boolean
По умолчанию: false

`scan`

Сканировать ли каталоги app/composables/ и app/utils/ для автоимпорта. Импорты от Nuxt и модулей (например, из vue или nuxt) остаются включёнными.

Тип: boolean
По умолчанию: true

logLevel

Уровень логирования при сборке.

В CI или при отсутствии TTY по умолчанию используется 'silent'; в Vite передаётся как 'silent', в webpack — как 'none'.

Тип: string
По умолчанию: "info"

modules

Модули — расширения Nuxt, добавляющие функциональность и интеграции.

Элемент массива: строка (имя пакета или путь к файлу), кортеж модуль, опции или функция модуля. Nuxt разрешает элементы через node (из node_modules), при алиасе ~~ — относительно rootDir.

Тип: array

Примечание: Модули выполняются последовательно, порядок важен. Сначала загружаются модули из nuxt.config.ts, затем из каталога modules/ в алфавитном порядке.

Пример:

export default defineNuxtConfig({
  modules: [
  // Using package name
    '@nuxt/scripts',
    // Relative to your project rootDir
    '~~/custom-modules/awesome.js',
    // Providing options
    ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
    // Inline definition
    function () {},
  ],
})

modulesDir

Каталоги для разрешения путей модулей (например, для webpack: resolveLoading, nodeExternals, postcss).

Путь задаётся относительно options.rootDir (по умолчанию — текущий рабочий каталог). Полезно в монорепозиториях в стиле yarn workspace.

Тип: array
По умолчанию

[
  "/<rootDir>/node_modules"
]

Пример:

export default defineNuxtConfig({
  modulesDir: ['../../node_modules'],
})

nitro

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

См.: Nitro configuration docs

`routeRules`

Тип: object

`runtimeConfig`

Тип: object
По умолчанию

{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

Настройки оптимизации на этапе сборки.

`asyncTransforms`

Опции трансформера из unctx, сохраняющего async-контекст после await.

`asyncFunctions`

Тип: array
По умолчанию

[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

`objectDefinitions`

`defineNuxtComponent`

Тип: array
По умолчанию

[
  "asyncData",
  "setup"
]

`defineNuxtPlugin`

Тип: array
По умолчанию

[
  "setup"
]

`definePageMeta`

Тип: array
По умолчанию

[
  "middleware",
  "validate"
]

`keyedComposables`

Функции, для которых внедряется ключ.

Если аргументов меньше argumentLength, последним аргументом подставляется «магическая» строка. Ключ стабилен между SSR и гидрацией на клиенте; нужно учитывать этот дополнительный аргумент. Ключ уникален в зависимости от места вызова в файле.

Подробнее о keyed-функциях.

Тип: array
По умолчанию

[
  {
    "name": "callOnce",
    "argumentLength": 3,
    "source": "#app/composables/once"
  },
  {
    "name": "defineNuxtComponent",
    "argumentLength": 2,
    "source": "#app/composables/component"
  },
  {
    "name": "useState",
    "argumentLength": 2,
    "source": "#app/composables/state"
  },
  {
    "name": "useFetch",
    "argumentLength": 3,
    "source": "#app/composables/fetch"
  },
  {
    "name": "useAsyncData",
    "argumentLength": 3,
    "source": "#app/composables/asyncData"
  },
  {
    "name": "useLazyAsyncData",
    "argumentLength": 3,
    "source": "#app/composables/asyncData"
  },
  {
    "name": "useLazyFetch",
    "argumentLength": 3,
    "source": "#app/composables/fetch"
  }
]

`treeShake`

Исключение кода из отдельных сборок (tree-shake).

`composables`

Исключение композаблов из серверной или клиентской сборки.

Пример:

export default defineNuxtConfig({
  optimization: {
    treeShake: {
      composables: {
        client: { vue: ['onMounted'] },
        server: { vue: ['onServerPrefetch'] },
      },
    },
  },
})

`client`

Тип: object
По умолчанию

{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}

`server`

Тип: object
По умолчанию

{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

pages

Включить ли интеграцию vue-router. Если не задано, включается при наличии каталога app/pages/.

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

Пример:

export default defineNuxtConfig({
  pages: {
    pattern: ['**/*/*.vue', '!**/*.spec.*'],
  },
})

plugins

Массив плагинов приложения Nuxt.

Элемент: строка (абсолютный или относительный путь). Суффиксы .client или .server — загрузка только в соответствующем контексте. Либо объект с полями src и mode.

Тип: array

Примечание: Плагины из каталога ~/plugins регистрируются автоматически; перечислять их в nuxt.config не обязательно, если не нужно задать порядок. Дубликаты устраняются по пути src.

См.: app/plugins/ directory documentation

Пример:

export default defineNuxtConfig({
  plugins: [
    '~/custom-plugins/foo.client.js', // only in client side
    '~/custom-plugins/bar.server.js', // only in server side
    '~/custom-plugins/baz.js', // both client & server
    { src: '~/custom-plugins/both-sides.js' },
    { src: '~/custom-plugins/client-only.js', mode: 'client' }, // only on client side
    { src: '~/custom-plugins/server-only.js', mode: 'server' }, // only on server side
  ],
})

postcss

`order`

Стратегия порядка подключения плагинов PostCSS.

Тип: function

`plugins`

Настройка плагинов PostCSS.

См.: PostCSS docs

`autoprefixer`

Плагин для разбора CSS и добавления вендорных префиксов.

См.: autoprefixer

`cssnano`

Тип: object

См.: cssnano configuration options

rootDir

Корневой каталог приложения.

Переопределяется, например, при запуске nuxt ./my-app/ (абсолютный путь от текущего каталога). Обычно задавать не требуется.

Тип: string
По умолчанию: "/<rootDir>"

routeRules

Глобальные опции маршрутов для подходящих серверных маршрутов.

Экспериментально: API может измениться в будущем.

См.: Nitro route rules documentation

router

`options`

Дополнительные опции для vue-router. Помимо опций vue-router, Nuxt добавляет свои (см. ниже).

Примечание: Из nuxt.config передавать можно только JSON-сериализуемые опции. Для более тонкой настройки используйте файл router.options.ts.

См.: Vue Router documentation

`hashMode`

Режим hash для SPA: в URL перед путём ставится #. URL не отправляется на сервер, SSR не поддерживается.

Тип: boolean
По умолчанию: false

`scrollBehaviorType`

Поведение прокрутки при переходе по hash-ссылкам.

Тип: string
По умолчанию: "auto"

runtimeConfig

Динамическая конфигурация и переменные окружения для контекста приложения Nuxt.

Доступ на сервере — через useRuntimeConfig. Обычно здесь хранят приватные данные (например, секреты API), не доступные на фронте. Всё в public и app доступно и на клиенте. Значения подставляются из переменных окружения в runtime (например, NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ перезапишет соответствующие поля).

Тип: object
По умолчанию

{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

Пример:

export default defineNuxtConfig({
  runtimeConfig: {
    apiKey: '', // по умолчанию пустая строка, задаётся в runtime из process.env.NUXT_API_KEY
    public: {
      baseURL: '', // доступно и на фронте
    },
  },
})

server

Конфигурация серверного сборщика Nuxt.

`builder`

Сборщик для серверной части приложения.

По умолчанию Nuxt использует @nuxt/nitro-server (standalone Nitro). Возможны и другие схемы, например Nitro как плагин Vite (Vite Environment API).

Тип: string | { bundle: (nuxt: Nuxt) => Promise<void> }
По умолчанию: "@nuxt/nitro-server"

Опция для внутреннего использования, API не финализирован. Перед использованием откройте issue.

serverDir

Каталог сервера Nuxt: маршруты Nitro, middleware и плагины.

Относительный путь задаётся от rootDir.

Тип: string
По умолчанию: "/<rootDir>/server"

serverHandlers

Обработчики сервера Nitro.

Опции каждого обработчика: handler — путь к файлу; route — маршрут (rou3); method — HTTP-метод; middleware — является ли middleware; lazy — ленивая загрузка.

Тип: array

См.: server/ directory documentation

Примечание: Файлы из server/api, server/middleware и server/routes регистрируются Nuxt автоматически.

Пример:

export default defineNuxtConfig({
  serverHandlers: [
    { route: '/path/foo/**:name', handler: '#server/foohandler.ts' },
  ],
})

sourcemap

Генерация sourcemap для серверной и/или клиентской сборки.

Один boolean применяется к обеим. Доступно значение 'hidden' для обеих сторон. Варианты: true — генерировать sourcemap и включать ссылки в бандл; false — не генерировать; 'hidden' — генерировать без ссылок в бандле.

Тип: object
По умолчанию

{
  "server": true,
  "client": false
}

spaLoadingTemplate

Boolean или путь к HTML-файлу, содержимое которого подставляется в страницы при ssr: false.

If it is unset, it will use ~/spa-loading-template.html file in one of your layers, if it exists. - If it is false, no SPA loading indicator will be loaded. - If true, Nuxt will look for ~/spa-loading-template.html file in one of your layers, or a default Nuxt image will be used. Примеры спиннеров: SpinKit, SVG Spinners.
По умолчанию: null

Пример: ~/spa-loading-template.html

<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #000;
  border-left-color: #000;
  border-bottom-color: #efefef;
  border-right-color: #efefef;
  border-radius: 50%;
  -webkit-animation: loader 400ms linear infinite;
  animation: loader 400ms linear infinite;
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

srcDir

Исходный каталог приложения Nuxt.

Относительный путь задаётся от rootDir.

Тип: string
По умолчанию: "app" (Nuxt 4), "." (Nuxt 3 with compatibilityMode: 3)

Пример:

export default defineNuxtConfig({
  srcDir: 'app/',
})

This expects the following folder structure:

-| app/
---| assets/
---| components/
---| composables/
---| layouts/
---| middleware/
---| pages/
---| plugins/
---| utils/
---| app.config.ts
---| app.vue
---| error.vue
-| server/
-| shared/
-| public/
-| modules/
-| layers/
-| nuxt.config.ts
-| package.json

ssr

Включить ли рендер HTML (динамически на сервере или при генерации). При false сгенерированные страницы будут пустыми.

Тип: boolean
По умолчанию: true

telemetry

Отключить телеметрию Nuxt.

См.: Nuxt Telemetry для дополнительной информации.

test

Приложение запущено в режиме модульных тестов.

Тип: boolean
По умолчанию: false

theme

Расширение проекта из локального или удалённого источника.

Строка — путь к каталогу или конфигу относительно текущего. Префиксы: github:, gitlab:, bitbucket:, https: для удалённого репозитория.

Тип: string

typescript

Настройка интеграции TypeScript в Nuxt.

`builder`

Какие типы сборщика подключать.

По умолчанию Nuxt определяет по опции builder ('vite'). Можно отключить (false) и задать типы самим или выбрать 'shared'. 'shared' удобен авторам модулей, поддерживающим несколько сборщиков.

По умолчанию: null

`hoist`

Модули, для которых генерировать глубокие алиасы в compilerOptions.paths. Подпути пока не поддерживаются. Может понадобиться в pnpm-монорепозитории с shamefully-hoist=false.

Тип: array
По умолчанию

[
  "nitropack/types",
  "nitropack/runtime",
  "nitropack",
  "defu",
  "h3",
  "consola",
  "ofetch",
  "@unhead/vue",
  "@nuxt/devtools",
  "vue",
  "@vue/runtime-core",
  "@vue/compiler-sfc",
  "vue-router",
  "vue-router/auto-routes",
  "unplugin-vue-router/client",
  "@nuxt/schema",
  "nuxt"
]

`includeWorkspace`

Включить родительский workspace в проект Nuxt. Полезно для тем и авторов модулей.

Тип: boolean
По умолчанию: false

`shim`

Генерировать shim для *.vue.

Рекомендуется использовать официальное расширение Vue для точных типов компонентов. Имеет смысл установить true, если вы используете другие инструменты (например, ESLint), не понимающие типы в .vue файлах.

Тип: boolean
По умолчанию: false

`strict`

TypeScript comes with certain checks to give you more safety and analysis of your program. Once you’ve converted your codebase to TypeScript, you can start enabling these checks for greater safety. Read More

Тип: boolean
По умолчанию: true

`tsConfig`

Расширение сгенерированных конфигов TypeScript (.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json и т.д.).

`typeCheck`

Проверка типов при сборке.

При true проверка и в dev. Ограничить только сборкой можно значением build. Нужны dev-зависимости typescript и vue-tsc.

Тип: boolean
По умолчанию: false

См.: Nuxt TypeScript docs

unhead

Объект конфигурации модуля unhead для Nuxt.

`legacy`

Enable the legacy compatibility mode for unhead module. This applies the following changes: - Disables Capo.js sorting - Adds the DeprecationsPlugin: supports hid, vmid, children, body - Adds the PromisesPlugin: supports promises as input

Тип: boolean
По умолчанию: false

См.: unhead migration documentation

Пример:

export default defineNuxtConfig({
  unhead: {
    legacy: true,
  },
})

`renderSSRHeadOptions`

Объект, передаваемый в renderSSRHead для настройки вывода.

Тип: object
По умолчанию

{
  "omitLineBreaks": false
}

Пример:

export default defineNuxtConfig({
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: true,
    },
  },
})

vite

Конфигурация, передаваемая напрямую в Vite.

См.: Vite configuration docs для дополнительной информации. Не все опции Vite поддерживаются в Nuxt.

`build`

`assetsDir`

Тип: string
По умолчанию: "_nuxt/"

`emptyOutDir`

Тип: boolean
По умолчанию: false

`cacheDir`

Тип: string
По умолчанию: "/<rootDir>/node_modules/.cache/vite"

`clearScreen`

Тип: boolean
По умолчанию: true

`define`

Тип: object
По умолчанию

{
  "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
  "process.dev": false,
  "import.meta.dev": false,
  "process.test": false,
  "import.meta.test": false
}

`esbuild`

Тип: object
По умолчанию

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

`mode`

Тип: string
По умолчанию: "production"

`optimizeDeps`

`esbuildOptions`

Тип: object
По умолчанию

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

`exclude`

Тип: array
По умолчанию

[
  "vue-demi"
]

`publicDir`

`resolve`

`extensions`

Тип: array
По умолчанию

[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

`root`

Тип: string
По умолчанию: "/<rootDir>"

`server`

`fs`

`allow`

Тип: array
По умолчанию

[
  "/<rootDir>/.nuxt",
  "/<rootDir>/app",
  "/<rootDir>",
  "/<workspaceDir>"
]

`vue`

`features`

`propsDestructure`

Тип: boolean
По умолчанию: true

`isProduction`

Тип: boolean
По умолчанию: true

`script`

`hoistStatic`

`template`

`compilerOptions`

Тип: object

`transformAssetUrls`

Тип: object
По умолчанию

{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

`vueJsx`

Тип: object
По умолчанию

{
  "isCustomElement": {
    "$schema": {
      "title": "",
      "description": "",
      "tags": []
    }
  }
}

vue

Vue.js config

`compilerOptions`

Опции компилятора Vue на этапе сборки.

См.: Vue documentation

`config`

Глобальная конфигурация приложения Vue. В nuxt.config задают только сериализуемые опции; остальное — в runtime в плагине Nuxt.

См.: Vue app config documentation

`propsDestructure`

Enable reactive destructure for defineProps

Тип: boolean
По умолчанию: true

`runtimeCompiler`

Включать ли компилятор Vue в runtime-бандл.

Тип: boolean
По умолчанию: false

`transformAssetUrls`

`image`

Тип: array
По умолчанию

[
  "xlink:href",
  "href"
]

`img`

Тип: array
По умолчанию

[
  "src"
]

`source`

Тип: array
По умолчанию

[
  "src"
]

`use`

Тип: array
По умолчанию

[
  "xlink:href",
  "href"
]

`video`

Тип: array
По умолчанию

[
  "src",
  "poster"
]

watch

Паттерны файлов, при изменении которых перезапускается dev-сервер Nuxt.

Массив строк (абсолютные пути или относительно srcDir и слоёв) или регулярных выражений (сопоставление с путём относительно srcDir).

Тип: array

watchers

Переопределение конфигурации watchers в nuxt.config.

`chokidar`

Опции, передаваемые в chokidar.

См.: chokidar

`ignoreInitial`

Тип: boolean
По умолчанию: true

`ignorePermissionErrors`

Тип: boolean
По умолчанию: true

`rewatchOnRawEvents`

Типы событий, при которых watcher перезапускается.

`webpack`

watchOptions to pass directly to webpack.

См.: webpack@4 watch options.

`aggregateTimeout`

Тип: number
По умолчанию: 1000

webpack

`aggressiveCodeRemoval`

Жёсткая замена typeof process, typeof window и typeof document для tree-shake бандла.

Тип: boolean
По умолчанию: false

`analyze`

При использовании webpack Nuxt подключает webpack-bundle-analyzer для визуализации бандлов.

Установите true для анализа или передайте объект опций: для webpack или для vite.

Тип: object
По умолчанию

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

Пример:

export default defineNuxtConfig({
  webpack: {
    analyze: {
      analyzerMode: 'static',
    },
  },
})

`cssSourceMap`

Включить CSS source map (по умолчанию true в dev).

Тип: boolean
По умолчанию: false

`devMiddleware`

См.: webpack-dev-middleware — доступные опции.

`stats`

Тип: string
По умолчанию: "none"

`experiments`

Configure webpack experiments

`extractCSS`

Вынос CSS в отдельные файлы.

Через mini-css-extract-plugin CSS выносится в отдельные файлы (обычно по одному на компонент), что позволяет кэшировать CSS и JS раздельно.

Тип: boolean
По умолчанию: true

Пример:

export default defineNuxtConfig({
  webpack: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true,
    },
  },
})

Чтобы вынести весь CSS в один файл, можно использовать обходное решение. Однако выносить всё в один файл не рекомендуется. Extracting into multiple CSS files is better for caching and preload isolation. It can also improve page performance by downloading and resolving only those resources that are needed.

Пример:

export default defineNuxtConfig({
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true,
          },
        },
      },
    },
  },
})

`filenames`

Настройка имён файлов бандлов.

Подробнее о манифестах: документация webpack.

Примечание: Осторожнее с именами без хеша в production: браузеры могут закэшировать ресурс и не подхватить изменения при первой загрузке.

В примере ниже «красивые» имена чанков заменяются на числовые id:

Пример:

export default defineNuxtConfig({
  webpack: {
    filenames: {
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
    },
  },
})

`app`

Тип: function

`chunk`

Тип: function

`css`

Тип: function

`font`

Тип: function

`img`

Тип: function

`video`

Тип: function

`friendlyErrors`

Установите false, чтобы отключить оверлей FriendlyErrorsWebpackPlugin.

Тип: boolean
По умолчанию: true

`hotMiddleware`

См.: webpack-hot-middleware — доступные опции.

`loaders`

Настройка опций встроенных webpack-лоадеров Nuxt.

`css`

См.: css-loader — доступные опции.

`esModule`

Тип: boolean
По умолчанию: false

`importLoaders`

Тип: number
По умолчанию: 0

`url`

`filter`

Тип: function

`cssModules`

См.: css-loader — доступные опции.

`esModule`

Тип: boolean
По умолчанию: false

`importLoaders`

Тип: number
По умолчанию: 0

`modules`

`localIdentName`

Тип: string
По умолчанию: "[local]_[hash:base64:5]"

`url`

`filter`

Тип: function

`esbuild`

Тип: object
По умолчанию

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

См.: esbuild loader

`file`

См.: file-loader Options

По умолчанию:

{ "esModule": false }

`esModule`

Тип: boolean
По умолчанию: false

`limit`

Тип: number
По умолчанию: 1000

`fontUrl`

См.: file-loader Options

По умолчанию:

{ "esModule": false }

`esModule`

Тип: boolean
По умолчанию: false

`limit`

Тип: number
По умолчанию: 1000

`imgUrl`

См.: file-loader Options

По умолчанию:

{ "esModule": false }

`esModule`

Тип: boolean
По умолчанию: false

`limit`

Тип: number
По умолчанию: 1000

`less`

По умолчанию

{
  "sourceMap": false
}

См.: less-loader Options

`pugPlain`

См.: pug options

`sass`

См.: sass-loader Options

По умолчанию:

{
  "sassOptions": {
    "indentedSyntax": true
  }
}

`sassOptions`

`indentedSyntax`

Тип: boolean
По умолчанию: true

`scss`

По умолчанию

{
  "sourceMap": false
}

См.: sass-loader Options

`stylus`

По умолчанию

{
  "sourceMap": false
}

См.: stylus-loader Options

`vue`

См.: vue-loader — доступные опции.

`compilerOptions`

Тип: object

`propsDestructure`

Тип: boolean
По умолчанию: true

`transformAssetUrls`

Тип: object
По умолчанию

{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

`vueStyle`

По умолчанию

{
  "sourceMap": false
}

`optimization`

Настройка оптимизации webpack.

`minimize`

Установите false, чтобы отключить минификацию (в dev по умолчанию отключена).

Тип: boolean
По умолчанию: true

`minimizer`

Можно задать свой массив плагинов-минификаторов.

`runtimeChunk`

Тип: string
По умолчанию: "single"

`splitChunks`

`automaticNameDelimiter`

Тип: string
По умолчанию: "/"

`cacheGroups`

`chunks`

Тип: string
По умолчанию: "all"

`optimizeCSS`

Опции плагина OptimizeCSSAssets.

По умолчанию true при включённом extractCSS.

Тип: boolean
По умолчанию: false

См.: css-minimizer-webpack-plugin documentation.

`plugins`

Дополнительные плагины webpack.

Тип: array

Пример:

import webpack from 'webpack'
import { version } from './package.json'

export default defineNuxtConfig({
  webpack: {
    plugins: [
      // ...
      new webpack.DefinePlugin({
        'process.VERSION': version,
      }),
    ],
  },
})

`postcss`

Customize PostCSS Loader. same options as postcss-loader options

`postcssOptions`

`plugins`

Тип: object
По умолчанию

{
  "autoprefixer": {},
  "cssnano": {}
}

`profile`

Включить профайлер в webpackbar.

Обычно включается аргументом CLI --profile.

Тип: boolean
По умолчанию: false

См.: webpackbar.

`serverURLPolyfill`

Библиотека-полифилл для URL и URLSearchParams.

По умолчанию 'url' (пакет).

Тип: string
По умолчанию: "url"

`warningIgnoreFilters`

Фильтры для скрытия предупреждений сборки.

Тип: array

workspaceDir

Корневой каталог workspace приложения.

Часто используется в монорепозитории. Nuxt пытается определить его автоматически; при необходимости можно переопределить здесь. Обычно задавать не требуется.

Тип: string
По умолчанию: "/<workspaceDir>"

Был ли материал полезен?

Report an issue or Edit this page on GitHub

import.meta

Определение окружения выполнения кода через import.meta.

Привет, мир

Для минимального приложения Nuxt 3 требуются только файлы `app.vue` и `nuxt.config.js`.