Toolkit for authoring modules and interacting with Nuxt
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Build plugin and configuration management for multiple bundlers including Vite, Webpack, and Rspack. Provides unified APIs for extending build configurations across different bundlers.
Add plugins that work across multiple bundlers with automatic detection and configuration.
/**
* Add build plugins for multiple bundlers (Vite/Webpack/Rspack)
* @param pluginFactory - Factory function that returns bundler-specific plugins
* @param options - Configuration options for plugin application
*/
function addBuildPlugin(
pluginFactory: AddBuildPluginFactory,
options?: ExtendConfigOptions
): void;
interface AddBuildPluginFactory {
vite?: () => VitePlugin | VitePlugin[];
webpack?: () => WebpackPluginInstance | WebpackPluginInstance[];
rspack?: () => RspackPluginInstance | RspackPluginInstance[];
}
interface ExtendConfigOptions {
/** Apply to development builds */
dev?: boolean;
/** Apply to production builds */
build?: boolean;
/** Apply to server builds */
server?: boolean;
/** Apply to client builds */
client?: boolean;
}Usage Examples:
import { addBuildPlugin } from "@nuxt/kit";
// Add plugin for all bundlers
addBuildPlugin({
vite: () => myVitePlugin(),
webpack: () => new MyWebpackPlugin(),
rspack: () => new MyRspackPlugin()
}, {
dev: true,
build: true
});Add Vite-specific plugins and extend Vite configuration.
/**
* Add Vite plugin to configuration
* @param pluginOrGetter - Vite plugin(s) or function returning plugin(s)
* @param options - Options for plugin application
*/
function addVitePlugin(
pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]),
options?: ExtendViteConfigOptions
): void;
/**
* Extend Vite configuration
* @param fn - Function to modify Vite config
* @param options - Options for config extension
*/
function extendViteConfig(
fn: (config: ViteConfig) => void,
options?: ExtendViteConfigOptions
): void;
interface ExtendViteConfigOptions extends ExtendConfigOptions {
/** Vite environment (client, server, dev, build) */
environment?: string;
}
interface ViteConfig {
plugins?: VitePlugin[];
resolve?: ResolveOptions;
define?: Record<string, any>;
css?: CSSOptions;
[key: string]: any;
}
interface VitePlugin {
name: string;
[key: string]: any;
}Usage Examples:
import { addVitePlugin, extendViteConfig } from "@nuxt/kit";
import { defineConfig } from "vite";
// Add Vite plugin
addVitePlugin(() => ({
name: "my-vite-plugin",
configResolved(config) {
// Plugin logic
}
}), {
dev: true,
client: true
});
// Extend Vite configuration
extendViteConfig((config) => {
config.define = config.define || {};
config.define.MY_CONSTANT = JSON.stringify("value");
config.resolve = config.resolve || {};
config.resolve.alias = {
...config.resolve.alias,
"@custom": "/path/to/custom"
};
});Add Webpack-specific plugins and extend Webpack configuration.
/**
* Add Webpack plugin to configuration
* @param pluginOrGetter - Webpack plugin(s) or function returning plugin(s)
* @param options - Options for plugin application
*/
function addWebpackPlugin(
pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]),
options?: ExtendWebpackConfigOptions
): void;
/**
* Extend Webpack configuration
* @param fn - Function to modify Webpack config
* @param options - Options for config extension
*/
function extendWebpackConfig(
fn: (config: WebpackConfig) => void,
options?: ExtendWebpackConfigOptions
): void;
interface ExtendWebpackConfigOptions extends ExtendConfigOptions {
/** Webpack mode (development, production) */
mode?: string;
}
interface WebpackConfig {
plugins?: WebpackPluginInstance[];
resolve?: WebpackResolveOptions;
module?: WebpackModuleOptions;
optimization?: WebpackOptimizationOptions;
[key: string]: any;
}
interface WebpackPluginInstance {
apply(compiler: any): void;
[key: string]: any;
}Usage Examples:
import { addWebpackPlugin, extendWebpackConfig } from "@nuxt/kit";
import webpack from "webpack";
// Add Webpack plugin
addWebpackPlugin(() => new webpack.DefinePlugin({
MY_CONSTANT: JSON.stringify("value")
}), {
build: true
});
// Extend Webpack configuration
extendWebpackConfig((config) => {
config.resolve = config.resolve || {};
config.resolve.alias = {
...config.resolve.alias,
"@custom": "/path/to/custom"
};
config.module = config.module || {};
config.module.rules = config.module.rules || [];
config.module.rules.push({
test: /\.custom$/,
use: "custom-loader"
});
});Add Rspack-specific plugins and extend Rspack configuration.
/**
* Add Rspack plugin to configuration
* @param pluginOrGetter - Rspack plugin(s) or function returning plugin(s)
* @param options - Options for plugin application
*/
function addRspackPlugin(
pluginOrGetter: RspackPluginInstance | RspackPluginInstance[] | (() => RspackPluginInstance | RspackPluginInstance[]),
options?: ExtendWebpackConfigOptions
): void;
/**
* Extend Rspack configuration
* @param fn - Function to modify Rspack config
* @param options - Options for config extension
*/
function extendRspackConfig(
fn: (config: WebpackConfig) => void,
options?: ExtendWebpackConfigOptions
): void;
interface RspackPluginInstance {
apply(compiler: any): void;
[key: string]: any;
}Usage Examples:
import { addRspackPlugin, extendRspackConfig } from "@nuxt/kit";
// Add Rspack plugin
addRspackPlugin(() => ({
apply(compiler) {
// Plugin logic
}
}), {
build: true
});
// Extend Rspack configuration
extendRspackConfig((config) => {
config.optimization = config.optimization || {};
config.optimization.minimize = true;
});interface ResolveOptions {
alias?: Record<string, string>;
extensions?: string[];
[key: string]: any;
}
interface CSSOptions {
preprocessorOptions?: Record<string, any>;
postcss?: any;
[key: string]: any;
}
interface WebpackResolveOptions {
alias?: Record<string, string>;
extensions?: string[];
modules?: string[];
[key: string]: any;
}
interface WebpackModuleOptions {
rules?: any[];
[key: string]: any;
}
interface WebpackOptimizationOptions {
minimize?: boolean;
splitChunks?: any;
[key: string]: any;
}Install with Tessl CLI
npx tessl i tessl/npm-nuxt--kit