Builder · Nuxt Kit

Nuxt have builders based on webpack and vite. You can extend the config passed to each one using extendWebpackConfig and extendViteConfig functions. You can also add additional plugins via addVitePlugin, addWebpackPlugin and addBuildPlugin.

`extendWebpackConfig`

Extends the webpack configuration. Callback function can be called multiple times, when applying to both client and server builds.

Type

function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): voidexport interface ExtendWebpackConfigOptions {  dev?: boolean  build?: boolean  server?: boolean  client?: boolean  prepend?: boolean}

Checkout webpack website for more information about its configuration.

Parameters

`callback`

Type: (config: WebpackConfig) => void

Required: true

A callback function that will be called with the webpack configuration object.

`options`

Type: ExtendWebpackConfigOptions

Default: {}

Options to pass to the callback function. This object can have the following properties:

dev (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in development mode.
build (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in production mode.
server (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the server bundle.
client (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the client bundle.
prepend (optional)
Type: boolean
If set to true, the callback function will be prepended to the array with unshift() instead of push().

Examples

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

`extendViteConfig`

Extends the Vite configuration. Callback function can be called multiple times, when applying to both client and server builds.

Type

function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): voidexport interface ExtendViteConfigOptions {  dev?: boolean  build?: boolean  server?: boolean  client?: boolean  prepend?: boolean}

Checkout Vite website for more information about its configuration.

Parameters

`callback`

Type: (config: ViteConfig) => void

Required: true

A callback function that will be called with the Vite configuration object.

`options`

Type: ExtendViteConfigOptions

Default: {}

Options to pass to the callback function. This object can have the following properties:

dev (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in development mode.
build (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in production mode.
server (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the server bundle.
client (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the client bundle.
prepend (optional)
Type: boolean
If set to true, the callback function will be prepended to the array with unshift() instead of push().

Examples

// https://github.com/Hrdtr/nuxt-appwriteimport { 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`

Append webpack plugin to the config.

Type

function addWebpackPlugin (pluginOrGetter: PluginOrGetter, options?: ExtendWebpackConfigOptions): voidtype PluginOrGetter = WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[])interface ExtendWebpackConfigOptions {  dev?: boolean  build?: boolean  server?: boolean  client?: boolean  prepend?: boolean}

See webpack website for more information about webpack plugins. You can also use this collection to find a plugin that suits your needs.

Parameters

`pluginOrGetter`

Type: PluginOrGetter

Required: true

A webpack plugin instance or an array of webpack plugin instances. If a function is provided, it must return a webpack plugin instance or an array of webpack plugin instances.

`options`

Type: ExtendWebpackConfigOptions

Default: {}

Options to pass to the callback function. This object can have the following properties:

dev (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in development mode.
build (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in production mode.
server (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the server bundle.
client (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the client bundle.
prepend (optional)
Type: boolean
If set to true, the callback function will be prepended to the array with unshift() instead of push().

Examples

// https://github.com/nuxt-modules/eslintimport 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`

Append Vite plugin to the config.

Type

function addVitePlugin (pluginOrGetter: PluginOrGetter, options?: ExtendViteConfigOptions): voidtype PluginOrGetter = VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[])interface ExtendViteConfigOptions {  dev?: boolean  build?: boolean  server?: boolean  client?: boolean  prepend?: boolean}

See Vite website for more information about Vite plugins. You can also use this repository to find a plugin that suits your needs.

Parameters

`pluginOrGetter`

Type: PluginOrGetter

Required: true

A Vite plugin instance or an array of Vite plugin instances. If a function is provided, it must return a Vite plugin instance or an array of Vite plugin instances.

`options`

Type: ExtendViteConfigOptions

Default: {}

Options to pass to the callback function. This object can have the following properties:

dev (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in development mode.
build (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in production mode.
server (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the server bundle.
client (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the client bundle.
prepend (optional)
Type: boolean
If set to true, the callback function will be prepended to the array with unshift() instead of push().

Examples

// https://github.com/yisibell/nuxt-svg-iconsimport { 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`

Builder-agnostic version of addWebpackPlugin and addVitePlugin. It will add the plugin to both webpack and vite configurations if they are present.

Type

function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): voidinterface AddBuildPluginFactory {  vite?: () => VitePlugin | VitePlugin[]  webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]}interface ExtendConfigOptions {  dev?: boolean  build?: boolean  server?: boolean  client?: boolean  prepend?: boolean}

Parameters

`pluginFactory`

Type: AddBuildPluginFactory

Required: true

A factory function that returns an object with vite and/or webpack properties. These properties must be functions that return a Vite plugin instance or an array of Vite plugin instances and/or a webpack plugin instance or an array of webpack plugin instances.

`options`

Type: ExtendConfigOptions

Default: {}

Options to pass to the callback function. This object can have the following properties:

dev (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in development mode.
build (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building in production mode.
server (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the server bundle.
client (optional)
Type: boolean
Default: true
If set to true, the callback function will be called when building the client bundle.
prepend (optional)
Type: boolean
If set to true, the callback function will be prepended to the array with unshift() instead of push().

Logging

Nuxt Kit provides a set of utilities to help you work with logging. These functions allow you to log messages with extra features.

Examples

Examples of Nuxt Kit utilities in use.