tessl/npm-nuxt--vite-builder
Vite bundler for Nuxt applications providing seamless integration between Nuxt's framework and Vite's build system
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
index.mddocs/
Nuxt Vite Builder
The Nuxt Vite Builder is the official bundling solution for Nuxt applications, providing seamless integration between Nuxt's full-stack framework and Vite's fast development server and optimized production builds. It handles both client-side and server-side rendering, CSS processing, asset management, and complex plugin orchestration for modern Vue.js applications.
Package Information
- Package Name: @nuxt/vite-builder
- Package Type: npm
- Language: TypeScript
- Installation: Automatically included with Nuxt 3+, no manual installation required
Core Imports
import { bundle, type ViteBuildContext } from "@nuxt/vite-builder";For CommonJS environments:
const { bundle } = require("@nuxt/vite-builder");Basic Usage
import type { Nuxt } from "@nuxt/schema";
import { bundle } from "@nuxt/vite-builder";
// Bundle a Nuxt application
await bundle(nuxt);Architecture
The Nuxt Vite Builder is organized around several key systems:
- Dual Build System: Separate client and server build pipelines optimized for their respective environments
- Plugin Ecosystem: Extensive Vite plugin integration for Vue SFC compilation, CSS processing, and asset handling
- Development Server: Hot module replacement and fast refresh during development
- Production Optimization: Code splitting, minification, and manifest generation for optimal performance
- SSR Integration: Server-side rendering support with seamless client hydration
- CSS Pipeline: PostCSS integration with plugin support and style extraction/inlining
Capabilities
Main Bundling
Core bundling functionality that orchestrates the entire build process for both client and server targets.
/**
* Main bundling function for Nuxt applications using Vite
* @param nuxt - Nuxt instance containing configuration and build context
*/
function bundle(nuxt: Nuxt): Promise<void>;
interface ViteBuildContext {
/** Nuxt application instance */
nuxt: Nuxt;
/** Vite configuration object */
config: ViteConfig;
/** Application entry point file path */
entry: string;
/** Optional Vite development server for client builds */
clientServer?: ViteDevServer;
/** Optional Vite development server for SSR builds */
ssrServer?: ViteDevServer;
}Client Building
Client-side build pipeline handling browser-optimized bundles, CSS processing, and development server setup.
/**
* Build client-side assets with Vite
* @param nuxt - Nuxt instance
* @param ctx - Vite build context
*/
function buildClient(nuxt: Nuxt, ctx: ViteBuildContext): Promise<void>;Server Building
Server-side build pipeline for SSR support, optimized for Node.js runtime with external dependency handling.
/**
* Build server-side assets for SSR
* @param nuxt - Nuxt instance
* @param ctx - Vite build context
*/
function buildServer(nuxt: Nuxt, ctx: ViteBuildContext): Promise<void>;CSS Processing
PostCSS integration and CSS handling for both development and production builds.
/**
* Resolve CSS processing options including PostCSS plugins
* @param nuxt - Nuxt instance with PostCSS configuration
* @returns Vite CSS configuration object
*/
function resolveCSSOptions(nuxt: Nuxt): Promise<ViteConfig['css']>;Plugin System
Comprehensive Vite plugin system providing specialized functionality for Nuxt applications.
/**
* SSR styles plugin for CSS extraction and inlining
* @param options - Plugin configuration options
* @returns Vite plugin instance
*/
function SSRStylesPlugin(options: SSRStylesPluginOptions): Plugin;
/**
* Public directories plugin for asset resolution
* @param options - Plugin configuration options
* @returns Array of Vite plugin instances
*/
function PublicDirsPlugin(options: VitePublicDirsPluginOptions): Plugin[];Development Server
Development server integration with hot module replacement, file watching, and CORS handling.
/**
* Vite-node plugin for SSR development
* @param nuxt - Nuxt instance
* @returns Vite plugin instance
*/
function ViteNodePlugin(nuxt: Nuxt): Plugin;
/**
* Write development server configuration
* @param nuxt - Nuxt instance
*/
function writeDevServer(nuxt: Nuxt): Promise<void>;Manifest Generation
Client and server manifest generation for optimal asset loading and bundle resolution.
/**
* Write client and server manifests for bundle resolution
* @param ctx - Vite build context
*/
function writeManifest(ctx: ViteBuildContext): Promise<void>;Core Types
interface ViteBuildContext {
/** Nuxt application instance */
nuxt: Nuxt;
/** Vite configuration object */
config: ViteConfig;
/** Application entry point file path */
entry: string;
/** Optional Vite development server for client builds */
clientServer?: ViteDevServer;
/** Optional Vite development server for SSR builds */
ssrServer?: ViteDevServer;
}
interface SSRStylesPluginOptions {
/** Source directory path */
srcDir: string;
/** Set of chunk IDs with inlined CSS */
chunksWithInlinedCSS: Set<string>;
/** Function or boolean determining if styles should be inlined */
shouldInline?: ((id?: string) => boolean) | boolean;
/** Array of Nuxt component definitions */
components: Component[];
/** Mapping of CSS files to chunks */
clientCSSMap: Record<string, Set<string>>;
/** Application entry point */
entry: string;
/** Global CSS file paths */
globalCSS: string[];
/** Build mode: server or client */
mode: 'server' | 'client';
}
interface VitePublicDirsPluginOptions {
/** Development mode flag */
dev?: boolean;
/** Base URL for public assets */
baseURL?: string;
}Install with Tessl CLI
npx tessl i tessl/npm-nuxt--vite-builder