Nuxt mid-level certification launch date announced!
Nuxt Kit предоставляет набор утилит, которые помогут вам работать со сборщиком. Эти функции позволяют вам расширять конфигурации webpack и vite.

В 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
}
Посетите сайт webpack для получения дополнительной информации о его конфигурации.

Параметры

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
}
Для получения дополнительной информации о конфигурации Vite обратитесь к сайту Vite.

Параметры

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

Параметры

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
}
Для получения дополнительной информации о плагинах Vite обратитесь по ссылке к сайту Vite. Вы также можете воспользоваться этим репозиторием чтобы найти подходящий вам плагин.

Параметры

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().