description: Nuxt Kit provides a set of utilities to help you work with the builder. These functions allow you to extend the webpack and vite configurations.
Nuxt have builders based on [webpack](https://github.com/nuxt/nuxt/tree/main/packages/webpack) and [vite](https://github.com/nuxt/nuxt/tree/main/packages/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
```ts
function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void
See [webpack website](https://webpack.js.org/concepts/plugins) for more information about webpack plugins. You can also use [this collection](https://webpack.js.org/awesome-webpack/#webpack-plugins) to find a plugin that suits your needs.
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.
See [Vite website](https://vite.devuide/api-plugin.html) for more information about Vite plugins. You can also use [this repository](https://github.com/vitejs/awesome-vite#plugins) to find a plugin that suits your needs.
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.
If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`.
### Examples
```ts
// 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`
Builder-agnostic version of `addWebpackPlugin` and `addVitePlugin`. It will add the plugin to both webpack and vite configurations if they are present.
### Type
```ts
function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void
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.