CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxt--kit

Toolkit for authoring modules and interacting with Nuxt

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

build-system.mddocs/

Build System Integration

Build plugin and configuration management for multiple bundlers including Vite, Webpack, and Rspack. Provides unified APIs for extending build configurations across different bundlers.

Capabilities

Cross-Bundler Plugin Management

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
});

Vite Integration

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"
  };
});

Webpack Integration

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"
  });
});

Rspack Integration

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;
});

Types

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

docs

auto-imports.md

build-system.md

compatibility.md

components.md

configuration.md

context-runtime.md

development-tools.md

index.md

module-system.md

path-resolution.md

plugins-templates.md

server-integration.md

tile.json