Builder

В Nuxt есть сборщики на основе webpack и vite. Вы можете расширить конфигурацию, передаваемую каждому из них, используя функции extendWebpackConfig и extendViteConfig. Вы также можете добавлять дополнительные плагины с помощью addVitePlugin, addWebpackPlugin и addBuildPlugin.

extendWebpackConfig

Расширяет конфигурацию webpack. Коллбэк-функция может быть вызвана несколько раз, для применения ее как к клиентским, так и к серверным сборкам.

Тип

function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void

export interface ExtendWebpackConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

Параметры

callback

Тип: (config: WebpackConfig) => void

Обязательный: true

Коллбэк-функция, которая будет вызвана с объектом конфигурации webpack.

options

Тип: ExtendWebpackConfigOptions

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

Параметры для передачи в коллбэк-функцию. Этот объект может иметь следующие свойства:

• dev (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме разработки.
• build (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в продакшен режиме.
• server (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке серверного бандла.
• client (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке клиентского бандла.
• prepend (опционально)
  Тип: boolean
  Если установлено значение true, коллбэк-функция будет добавлена в начало массива с помощью unshift() вместо push().

Примеры

import { defineNuxtModule, extendWebpackConfig } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    extendWebpackConfig((config) => {
      config.module?.rules.push({
        test: /\.txt$/,
        use: 'raw-loader'
      })
    })
  }
})

extendViteConfig

Расширяет конфигурацию Vite. Коллбэк-функция может быть вызвана несколько раз, когда применяется как к клиентской, так и к серверной сборке.

Тип

function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void

export interface ExtendViteConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

Параметры

callback

Тип: (config: ViteConfig) => void

Обязательный: true

Коллбэк-функция, которая будет вызвана с помощью объекта конфигурации Vite.

options

Тип: ExtendViteConfigOptions

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

Параметры для передачи в коллбэк-функцию. Этот объект может иметь следующие свойства:

• dev (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме разработки.
• build (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме продакшена.
• server (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке серверного бандла.
• client (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке клиентского бандла.
• prepend (опционально)
  Тип: boolean
  Если установлено значение true, коллбэк-функция будет добавлена в начало массива с помощью unshift() вместо push().

Примеры

// https://github.com/Hrdtr/nuxt-appwrite
import { defineNuxtModule, extendViteConfig } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    extendViteConfig((config) => {
      config.optimizeDeps = config.optimizeDeps || {}
      config.optimizeDeps.include = config.optimizeDeps.include || []
      config.optimizeDeps.include.push('cross-fetch')
    })
  }
})

addWebpackPlugin

Добавьте плагин webpack в конфигурацию.

Тип

function addWebpackPlugin (pluginOrGetter: PluginOrGetter, options?: ExtendWebpackConfigOptions): void

type PluginOrGetter = WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[])

interface ExtendWebpackConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

Параметры

pluginOrGetter

Тип: PluginOrGetter

Обязательный: true

Экземпляр плагина webpack или массив экземпляров плагинов webpack. Если указана функция, она должна возвращать экземпляр плагина webpack или массив экземпляров плагинов webpack.

options

Тип: ExtendWebpackConfigOptions

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

Параметры для передачи в колбэк-функцию. Этот объект может иметь следующие свойства:

• dev (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме разработки.
• build (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме продакшена.
• server (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке серверного бандла.
• client (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке клиентского бандла.
• prepend (опционально)
  Тип: boolean
  Если установлено значение true, коллбэк-функция будет добавлена в начало массива с помощью unshift() вместо push().

Примеры

// https://github.com/nuxt-modules/eslint
import EslintWebpackPlugin from 'eslint-webpack-plugin'
import { defineNuxtModule, addWebpackPlugin } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-eslint',
    configKey: 'eslint',
  },
  defaults: nuxt => ({
    include: [`${nuxt.options.srcDir}/**/*.{js,jsx,ts,tsx,vue}`],
    lintOnStart: true,
  }),
  setup(options, nuxt) {
    const webpackOptions = {
      ...options,
      context: nuxt.options.srcDir,
      files: options.include,
      lintDirtyModulesOnly: !options.lintOnStart
    }
    addWebpackPlugin(new EslintWebpackPlugin(webpackOptions), { server: false })
  }
})

addVitePlugin

Добавьте плагин Vite в конфигурацию.

Тип

function addVitePlugin (pluginOrGetter: PluginOrGetter, options?: ExtendViteConfigOptions): void

type PluginOrGetter = VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[])

interface ExtendViteConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

Параметры

pluginOrGetter

Тип: PluginOrGetter

Обязательный: `true

Плагин Vite или массив плагинов Vite. Если предоставлена функция, она должна возвращать экземпляр плагина Vite или массив экземпляров плагинов Vite.

options

Тип: ExtendViteConfigOptions

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

Параметры для передачи в колбэк-функцию. Этот объект может иметь следующие свойства:

• dev (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме разработки.
• build (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме продакшена.
• server (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке серверного бандла.
• client (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке клиентского бандла.
• prepend (опционально)
  Тип: boolean
  Если установлено значение true, коллбэк-функция будет добавлена в начало массива с помощью unshift() вместо push().

Примеры

// https://github.com/yisibell/nuxt-svg-icons
import { defineNuxtModule, addVitePlugin } from '@nuxt/kit'
import { svg4VuePlugin } from 'vite-plugin-svg4vue'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-svg-icons',
    configKey: 'nuxtSvgIcons',
  },
  defaults: {
    svg4vue: {
      assetsDirName: 'assets/icons',
    },
  },
  setup(options) {
    addVitePlugin(svg4VuePlugin(options.svg4vue))
  },
})

addBuildPlugin

Универсальная версия addWebpackPlugin и addVitePlugin. Она добавит плагин в конфигурации webpack и vite, если они присутствуют.

Тип

function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void

interface AddBuildPluginFactory {
  vite?: () => VitePlugin | VitePlugin[]
  webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]
}

interface ExtendConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

Параметры

pluginFactory

Тип: AddBuildPluginFactory

Обязательный: true

Функция-фабрика, которая возвращает объект со свойствами vite и/или webpack. Эти свойства должны быть функциями, которые возвращают экземпляр плагина Vite или массив экземпляров плагинов Vite и/или экземпляр плагина webpack или массив экземпляров плагинов webpack.

options

Тип: ExtendConfigOptions

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

Параметры для передачи в коллбэк-функцию. Этот объект может иметь следующие свойства:

• dev (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме разработки.
• build (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке в режиме продакшена.
• server (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке серверного бандла.
• client (опционально)
  Тип: boolean
  По умолчанию: true
  Если установлено значение true, коллбэк-функция будет вызываться при сборке клиентского бандла.
• prepend (опционально)
  Тип: boolean
  Если установлено значение true, коллбэк-функция будет добавлена в начало массива с помощью unshift() вместо push().