#Vue

In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related example projects in Examples.

#Create Vue project

You can use create-rslib to create a project with Rslib + Vue. Just execute the following command:

npm create rslib@latest

Then select Vue when prompted to "Select template".

#Use Rslib in an existing project

For developing Vue components, you need to set the target to "web" in rslib.config.ts. This is crucial because Rslib sets target to "node" by default, which is different from Rsbuild's default target value.

To compile Vue (.vue single-file components), you need to register the rsbuild-plugin-unplugin-vue plugin based on unplugin-vue. This plugin will automatically add the necessary configurations for Vue build.

For example, register in rslib.config.ts:

import { defineConfig } from '@rslib/core';
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue'; 

export default defineConfig({
  lib: [
    // ...
  ],
  output: {
    target: 'web',
  },
  plugins: [pluginUnpluginVue(/** options here */)],
});

For more configuration options, please refer to the rsbuild-plugin-unplugin-vue plugin documentation.