Nuxt는 Vite 및 webpack을 기반으로 한 빌더를 가지고 있습니다. extendViteConfig 및 extendWebpackConfig 함수를 사용하여 각각에 전달된 설정을 확장할 수 있습니다. 또한 addVitePlugin, addWebpackPlugin 및 addBuildPlugin을 통해 추가 플러그인을 추가할 수 있습니다.

extendViteConfig

Vite 설정을 확장합니다. 콜백 함수는 클라이언트와 서버 빌드 모두에 적용될 때 여러 번 호출될 수 있습니다.

Usage

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

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

Type

// @errors: 2391
import type { UserConfig as ViteConfig } from 'vite'
import type { ExtendViteConfigOptions } from '@nuxt/kit'
// ---cut---
function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void

Parameters

callback: Vite 설정 객체와 함께 호출될 콜백 함수입니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

extendWebpackConfig

webpack 설정을 확장합니다. 콜백 함수는 클라이언트와 서버 빌드 모두에 적용될 때 여러 번 호출될 수 있습니다.

Usage

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

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

Type

// @errors: 2391
import type { Configuration as WebpackConfig } from 'webpack'
import type { ExtendWebpackConfigOptions } from '@nuxt/kit'
// ---cut---
function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void

Parameters

callback: webpack 설정 객체와 함께 호출될 콜백 함수입니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

addVitePlugin

Vite 플러그인을 설정에 추가합니다.

Usage

// @errors: 2307
// ---cut---
import { addVitePlugin, defineNuxtModule } 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))
  },
})

Type

// @errors: 2391
import type { Plugin as VitePlugin } from 'vite'
import type { ExtendViteConfigOptions } from '@nuxt/kit'
// ---cut---
function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void

Parameters

pluginOrGetter: Vite 플러그인 인스턴스 또는 Vite 플러그인 인스턴스 배열입니다. 함수가 제공되면 Vite 플러그인 인스턴스 또는 Vite 플러그인 인스턴스 배열을 반환해야 합니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

addWebpackPlugin

webpack 플러그인을 설정에 추가합니다.

Usage

import EslintWebpackPlugin from 'eslint-webpack-plugin'
import { addWebpackPlugin, defineNuxtModule } 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 })
  },
})

Type

// @errors: 2391
import type { WebpackPluginInstance } from 'webpack'
import type { ExtendWebpackConfigOptions } from '@nuxt/kit'
// ---cut---
function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions): void

Parameters

pluginOrGetter: webpack 플러그인 인스턴스 또는 webpack 플러그인 인스턴스 배열입니다. 함수가 제공되면 webpack 플러그인 인스턴스 또는 webpack 플러그인 인스턴스 배열을 반환해야 합니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

addBuildPlugin

addVitePlugin 및 addWebpackPlugin의 빌더에 구애받지 않는 버전입니다. Vite 및 webpack 설정이 존재하는 경우 플러그인을 모두 추가합니다.

Type

// @errors: 2391
import type { ExtendConfigOptions } from '@nuxt/kit'
import type { Plugin as VitePlugin } from 'vite'
import type { WebpackPluginInstance } from 'webpack'
import type { RspackPluginInstance } from '@rspack/core'
interface AddBuildPluginFactory {
  vite?: () => VitePlugin | VitePlugin[]
  webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]
  rspack?: () => RspackPluginInstance | RspackPluginInstance[]
}
// ---cut---
function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void

Parameters

pluginFactory: vite 및/또는 webpack 속성을 반환하는 객체를 반환하는 팩토리 함수입니다. 이 속성들은 Vite 플러그인 인스턴스 또는 Vite 플러그인 인스턴스 배열 및/또는 webpack 플러그인 인스턴스 또는 webpack 플러그인 인스턴스 배열을 반환하는 함수여야 합니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다: