#@esmx/rspack-vue

The Rspack Vue package provides APIs to create and configure Rspack apps based on Vue, supporting component development, builds, and server-side rendering.

#Install

Install @esmx/rspack-vue as a dev dependency:

npm install @esmx/rspack-vue -D

#Type Exports

#BuildTarget

type BuildTarget = 'node' | 'client' | 'server'

Target environment type used to configure build-specific optimizations:

• node: code for Node.js runtime
• client: code for browsers
• server: code for server runtimes

#RspackAppConfigContext

interface RspackAppConfigContext {
  esmx: Esmx
  buildTarget: BuildTarget
  config: RspackOptions
  options: RspackAppOptions
}

Context available within configuration hooks:

• esmx: Esmx instance
• buildTarget: current target (client/server/node)
• config: Rspack configuration object
• options: app options

#RspackAppOptions

interface RspackAppOptions {
  css?: 'css' | 'js' | false
  loaders?: {
    styleLoader?: string
  }
  styleLoader?: Record<string, any>
  cssLoader?: Record<string, any>
  target?: {
    web?: string[]
    node?: string[]
  }
  definePlugin?: Record<string, any>
  config?: (context: RspackAppConfigContext) => void | Promise<void>
}

Options for Rspack apps:

• css: output mode ('css' for separate files, 'js' inline). Defaults to 'css' in production; 'js' in development for HMR
• loaders: custom loader configuration
• styleLoader: options for style-loader
• cssLoader: options for css-loader
• target: compatibility targets
• definePlugin: global constant definitions
• config: configuration hook

#RspackHtmlAppOptions

Extends RspackAppOptions with HTML-app specific options.

#Function Exports

#createRspackApp

function createRspackApp(esmx: Esmx, options?: RspackAppOptions): Promise<App>

Creates a standard Rspack app instance.

Parameters:

• esmx: Esmx instance
• options: Rspack app options

Returns:

• Promise<App> resolving to the created app

#createRspackHtmlApp

function createRspackHtmlApp(esmx: Esmx, options?: RspackHtmlAppOptions): Promise<App>

Creates an HTML-type Rspack app instance.

Parameters:

• esmx: Esmx instance
• options: HTML app options

Returns:

• Promise<App> resolving to the created app

#Constant Exports

#RSPACK_LOADER

const RSPACK_LOADER: Record<string, string> = {
  builtinSwcLoader: 'builtin:swc-loader',
  lightningcssLoader: 'builtin:lightningcss-loader',
  styleLoader: 'style-loader',
  cssLoader: 'css-loader',
  lessLoader: 'less-loader',
  styleResourcesLoader: 'style-resources-loader',
  workerRspackLoader: 'worker-rspack-loader'
}

Loader identifier map for commonly used loaders:

• builtinSwcLoader: SWC loader for TS/JS files
• lightningcssLoader: high-performance CSS compiler
• styleLoader: injects CSS into the DOM
• cssLoader: parses CSS and handles CSS modules
• lessLoader: compiles Less to CSS
• styleResourcesLoader: auto-imports global style resources (variables, mixins)
• workerRspackLoader: handles Web Worker files

Example:

import { RSPACK_LOADER } from '@esmx/rspack';

export default {
  async devApp(esmx) {
    return import('@esmx/rspack').then((m) =>
      m.createRspackHtmlApp(esmx, {
        loaders: {
          styleLoader: RSPACK_LOADER.styleLoader,
          cssLoader: RSPACK_LOADER.cssLoader,
          lightningcssLoader: RSPACK_LOADER.lightningcssLoader
        }
      })
    );
  }
};

#Module Exports

#rspack

Re-exports everything from @rspack/core to provide full Rspack capabilities.