{"library":"rspack-vue-loader","title":"Rspack Vue Loader","description":"rspack-vue-loader is the official Rspack loader for processing Vue Single-File Components (SFCs), enabling developers to leverage Vue's component authoring format within an Rspack build pipeline. As of version `17.5.0`, it focuses exclusively on Rspack compatibility, explicitly removing dependencies on Webpack. The library is actively maintained with frequent fixes and contributions, demonstrating a stable yet evolving release cadence. Key features include the ability to apply other Rspack loaders to individual SFC blocks (e.g., Sass for <style>, Pug for <template>), support for custom blocks, automatic handling of static assets referenced in templates and styles as module dependencies, simulated scoped CSS, and state-preserving hot-reloading for an efficient development experience. It provides a dedicated and robust solution for integrating Vue.js 3 with Rspack, differentiating itself from its Webpack counterpart, `vue-loader`.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rspack-vue-loader"],"cli":null},"imports":["import { VueLoaderPlugin } from 'rspack-vue-loader';","loader: 'rspack-vue-loader'","import { defineConfig } from '@rspack/cli';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { defineConfig } from '@rspack/cli';\nimport { VueLoaderPlugin } from 'rspack-vue-loader';\nimport path from 'path';\n\nexport default defineConfig({\n  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',\n  entry: {\n    main: './src/main.ts',\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'rspack-vue-loader',\n        options: {\n          // Enable inline matchResource for better rule matching\n          experimentalInlineMatchResource: true,\n        },\n      },\n      {\n        test: /\\.ts$/,\n        exclude: [/node_modules/],\n        loader: 'builtin:swc-loader',\n        options: {\n          jsc: {\n            parser: {\n              syntax: 'typescript',\n            },\n            // Target ESNext for modern browsers\n            target: 'esnext',\n          },\n        },\n      },\n      {\n        test: /\\.css$/,\n        // Rspack natively supports CSS, so basic setup can be simple\n        // For preprocessors or advanced needs, use specific loaders like 'less-loader' or 'sass-loader'\n        type: 'css',\n      },\n      {\n        test: /\\.(png|jpe?g|gif|webp|svg)$/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'assets/[name][ext]'\n        }\n      }\n    ],\n  },\n  plugins: [\n    // Make sure to include the VueLoaderPlugin!\n    new VueLoaderPlugin(),\n  ],\n  output: {\n    filename: '[name].js',\n    path: path.resolve(__dirname, 'dist'),\n    clean: true,\n  },\n  devServer: {\n    port: 8080,\n    hot: true,\n    historyApiFallback: true,\n  },\n});\n","lang":"typescript","description":"This Rspack configuration demonstrates how to set up `rspack-vue-loader` for Vue 3 Single-File Components, including TypeScript support via Rspack's built-in SWC loader, and basic asset handling. It highlights the use of `VueLoaderPlugin` and the loader string in module rules.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}