@rsbuild/plugin-vue2
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

@rsbuild/plugin-vue2

Provides support for Vue 2 SFC (Single File Components). The plugin internally integrates vue-loader v15.

@rsbuild/plugin-vue2 only supports Vue >= 2.7.0.

npm version license

Usage

Install:

npm add @rsbuild/plugin-vue2 -D

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginVue2 } from "@rsbuild/plugin-vue2";

export default {
  plugins: [pluginVue2()],
};

After registering the plugin, you can import *.vue files in your code.

Options

If you need to customize the compilation behavior of Vue, you can use the following configs.

vueLoaderOptions

Options passed to vue-loader, please refer to the vue-loader documentation for detailed usage.

  • Type: VueLoaderOptions
  • Default:
const defaultOptions = {
  compilerOptions: {
    whitespace: "condense",
  },
  experimentalInlineMatchResource: true,
};
  • Example:
pluginVue2({
  vueLoaderOptions: {
    hotReload: false,
  },
});

The Vue 2 plugin is using the vue-loader v15. Please be aware that there may be configuration differences between v15 and the latest version.

splitChunks

When chunkSplit.strategy set to split-by-experience, Rsbuild will automatically split vue and router related packages into separate chunks by default:

  • lib-vue.js: includes vue, vue-loader.
  • lib-router.js: includes vue-router.

This option is used to control this behavior and determine whether the vue and router related packages need to be split into separate chunks.

  • Type:
type SplitVueChunkOptions = {
  vue?: boolean;
  router?: boolean;
};
  • Default:
const defaultOptions = {
  vue: true,
  router: true,
};
  • Example:
pluginVue({
  splitChunks: {
    vue: false,
    router: false,
  },
});

FAQ

/deep/ selector causes compilation error

/deep/ is a deprecated usage as of Vue v2.7. Since it is not a valid CSS syntax, CSS compilation tools like Lightning CSS will fail to compile it.

You can use :deep() instead. See Vue - Deep Selectors for more details.

<style scoped>
  .a :deep(.b) {
    /* ... */
  }
</style>

You can also refer to Vue - RFC 0023 for more details.

License

MIT.

Readme

Keywords

none

Package Sidebar

Install

npm i @rsbuild/plugin-vue2

Weekly Downloads

664

Version

1.0.1

License

MIT

Unpacked Size

18.6 kB

Total Files

7

Last publish

Collaborators

  • 9aoy
  • chenjiahan
  • hardfist