kit/builder

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

extendViteConfig function signature

The extendViteConfig function extends the Vite configuration. It has the signature: function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void. The callback function can be called multiple times when applying to both client and server builds. This hook is now deprecated; using a Vite plugin with a config hook, or the applyToEnvironment hook, is recommended instead.

extendViteConfig options parameters

The extendViteConfig function accepts an options parameter with the following properties: dev (boolean, optional, default false) - if true, callback runs in development mode; build (boolean, optional, default false) - if true, callback runs in production mode; server (boolean, optional, default false, deprecated in Nuxt 5+) - if true, callback runs when building the server bundle; client (boolean, optional, default false, deprecated in Nuxt 5+) - if true, callback runs when building the client bundle; prepend (boolean, optional, default false) - if true, the callback is prepended with unshift() instead of push().

extendViteConfig example usage

Example showing how to extend Vite configuration to include a dependency in optimizeDeps: ```ts import { defineNuxtModule, extendViteConfig } from '@nuxt/kit' export default defineNuxtModule({ setup () { extendViteConfig((config) => { config.optimizeDeps ||= {} config.optimizeDeps.include ||= [] config.optimizeDeps.include.push('cross-fetch') }) }, }) ```

extendViteConfig Nuxt 5+ with addVitePlugin

For environment-specific configuration in Nuxt 5+, use addVitePlugin() instead of extendViteConfig. A Vite plugin can have a config hook for global configuration affecting all environments, and an applyToEnvironment method with a configEnvironment hook for environment-specific configuration. The config hook runs before applyToEnvironment and modifies global configuration.

extendWebpackConfig function signature

The extendWebpackConfig function extends the webpack configuration. It has the signature: function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void. The callback function can be called multiple times when applying to both client and server builds.

extendWebpackConfig example usage

Example showing how to extend webpack configuration to add a loader for .txt files: ```ts import { defineNuxtModule, extendWebpackConfig } from '@nuxt/kit' export default defineNuxtModule({ setup () { extendWebpackConfig((config) => { config.module!.rules!.push({ test: /\.txt$/, use: 'raw-loader', }) }) }, }) ```

addVitePlugin function signature

The addVitePlugin function appends a Vite plugin to the config. It has the signature: function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void. The pluginOrGetter parameter can be a Vite plugin instance, an array of instances, or a function that returns a plugin or array of plugins. The function can be async and return a Promise for lazy-loading plugins.

addVitePlugin options parameters

The addVitePlugin function accepts an options parameter with the following properties: dev (boolean, optional, default false) - if true, callback runs in development mode; build (boolean, optional, default false) - if true, callback runs in production mode; server (boolean, optional, default false, deprecated in Nuxt 5+) - if true, callback runs when building the server bundle; client (boolean, optional, default false, deprecated in Nuxt 5+) - if true, callback runs when building the client bundle; prepend (boolean, optional, default false) - if true, the callback is prepended with unshift() instead of push(). In Nuxt 5+, plugins registered with server: false or client: false options will not have their config or configResolved hooks called; use applyToEnvironment() for environment-specific plugins instead.

addVitePlugin example usage

Example showing how to add a Vite plugin globally and for a specific environment: ```ts 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)) // or, to add a vite plugin to only one environment addVitePlugin(() => ({ name: 'my-client-plugin', applyToEnvironment (environment) { return environment.name === 'client' }, // ... rest of your client-only plugin })) }, }) ```

addVitePlugin lazy loading example

Example showing how to lazy-load a Vite plugin, which is only imported when the build actually runs: ```ts import { addVitePlugin, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { addVitePlugin(() => import('my-vite-plugin').then(r => r.default())) }, }) ```

addWebpackPlugin function signature

The addWebpackPlugin function appends a webpack plugin to the config. It has the signature: function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions): void. The pluginOrGetter parameter can be a webpack plugin instance, an array of instances, or a function that returns a plugin or array of plugins. The function can be async and return a Promise for lazy-loading plugins.

addWebpackPlugin example usage

Example showing how to add an ESLint webpack plugin to a Nuxt module: ```ts 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 }) }, }) ```

addBuildPlugin function signature

The addBuildPlugin function is a builder-agnostic version of addVitePlugin and addWebpackPlugin that adds a plugin to both Vite and webpack configurations if present. It has the signature: function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void. The pluginFactory parameter is an object with optional vite, webpack, and rspack properties, each being a function that returns the respective plugin instance(s).

addBuildPlugin options parameters

The addBuildPlugin function accepts an options parameter with the following properties: dev (boolean, optional, default false) - if true, callback runs in development mode; build (boolean, optional, default false) - if true, callback runs in production mode; server (boolean, optional, default false) - if true, callback runs when building the server bundle; client (boolean, optional, default false) - if true, callback runs when building the client bundle; prepend (boolean, optional, default false) - if true, the callback is prepended with unshift() instead of push().

setBuildOutput function signature

The setBuildOutput function sets a build output provider for a given key. It has the signature: function setBuildOutput<K extends keyof NuxtBuildOutputs> (key: K, provider: NuxtBuildOutputs[K]): void. Build outputs are the contract between builders (Vite, webpack, Rspack, or a custom builder) and the Nitro server runtime, mapping keys to nuxt/* subpath imports that the server runtime resolves at build time.

setBuildOutput valid keys

The setBuildOutput function accepts the following keys: serverEntry, clientManifest, clientPrecomputed, ssrStyles, entryChunkName, or entryIds. The provider parameter is a function (possibly async) that returns the module body as a string, read lazily when the server build resolves the corresponding nuxt/* import.

setBuildOutput example usage

Examples showing how to use setBuildOutput: ```ts import { setBuildOutput } from '@nuxt/kit' // Re-export the built SSR entry by absolute specifier. setBuildOutput('serverEntry', () => `export { default } from ${JSON.stringify(serverEntryURL)}`) // Provide the serialized client manifest. setBuildOutput('clientManifest', () => `export default ${serializedManifest}`) // Re-export the emitted per-component styles map for `nuxt/styles`. setBuildOutput('ssrStyles', () => `export { default } from ${JSON.stringify(pathToFileURL(resolve(serverDir, 'styles.mjs')).href)}`) ```

Give your agent this brain