#@esmx/rspack-vue

@esmx/rspack-vue provides a set of APIs for creating and configuring Vue-based Rspack applications, supporting Vue 2.7+ and Vue 3 component development, building, and SSR.

#Installation

Use package manager to install @esmx/rspack-vue as a development dependency:

npm install @esmx/rspack-vue vue -D

yarn add @esmx/rspack-vue vue -D

pnpm add @esmx/rspack-vue vue -D

bun add @esmx/rspack-vue vue -D

deno add npm:@esmx/rspack-vue npm:vue -D

#Type Exports

#RspackVueAppOptions

interface RspackVueAppOptions extends RspackHtmlAppOptions {
  vueLoader?: Record<string, any>
}

Vue application configuration options interface, inherits from @esmx/rspack's RspackHtmlAppOptions:

• vueLoader: vue-loader configuration options

For details on base types, please refer to the @esmx/rspack documentation.

#Function Exports

#createRspackVue2App

function createRspackVue2App(esmx: Esmx, options?: RspackVueAppOptions): Promise<App>

Creates a Vue 2.7+ application build instance. Automatically configures vue-loader-v15 and Vue 2 related compilation options.

Parameters:

• esmx: Esmx framework instance
• options: Vue application configuration options

Returns:

• Returns a Promise that resolves to the created application instance

#createRspackVue3App

function createRspackVue3App(esmx: Esmx, options?: RspackVueAppOptions): Promise<App>

Creates a Vue 3 application build instance. Automatically configures vue-loader-v17 and Vue 3 related compilation options.

Parameters:

• esmx: Esmx framework instance
• options: Vue application configuration options

Returns:

• Returns a Promise that resolves to the created application instance

#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'
}

Rspack built-in loader identifier mapping object that provides commonly used loader name constants:

• builtinSwcLoader: Rspack built-in SWC loader for processing TypeScript/JavaScript files
• lightningcssLoader: Rspack built-in lightningcss loader, a high-performance compiler for processing CSS files
• styleLoader: Loader that injects CSS into the DOM
• cssLoader: Loader that parses CSS files and handles CSS modularization
• lessLoader: Loader that compiles Less files to CSS
• styleResourcesLoader: Loader that automatically imports global style resources (variables, mixins, etc.)
• workerRspackLoader: Loader for processing Web Worker files

Using these constants can reference built-in loaders in configuration, avoiding manual string input:

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

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

Notes:

• These loaders are already built into Rspack, requiring no additional installation
• When customizing loader configuration, these constants can be used to replace default loader implementations
• Some loaders (such as builtinSwcLoader) have specific configuration options; please refer to the corresponding configuration documentation

#Module Exports

#rspack

Re-exports all contents from @rspack/core package, providing complete Rspack core functionality.