close
Rslib
  • English

      • 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.

      Note

      1. Only Vue 3 is supported, Vue 2 is not supported.

      2. Vue's declaration files are generated by vue-tsc, so lib.dts / lib.redirect.dts / lib.banner.dts / lib.footer.dts are not effective in Vue projects.

      Create Vue project

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

      npm
      yarn
      pnpm
      bun
      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-vue plugin. This plugin will automatically add the necessary configurations for Vue build.

      For example, register in rslib.config.ts:

      rslib.config.ts
      import { defineConfig } from '@rslib/core';
import { pluginVue } from '@rsbuild/plugin-vue'; 

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

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