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
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- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
