@vitejs/plugin-vue weekly downloads statistics

@vitejs/plugin-vue

Note: as of vue 3.2.13+ and @vitejs/plugin-vue 1.9.0+, @vue/compiler-sfc is no longer required as a peer dependency.

For JSX / TSX support, @vitejs/plugin-vue-jsx is also needed.

Options

Asset URL handling

When @vitejs/plugin-vue compiles the blocks in SFCs, it also converts any encountered asset URLs into ESM imports.

For example, the following template snippet:

Is the same as:

By default the following tag/attribute combinations are transformed, and can be configured using the template.transformAssetUrls option.

Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. import imgUrl from '../image.png'.

Example for passing options to vue/compiler-sfc:

Example for transforming custom blocks

Create a file named Demo.vue, add lang="yaml" to the blocks, then you can use the syntax of YAML:

message is mounted on the i18n property of the component instance, you can use like this:

Using Vue SFCs as Custom Elements

Requires vue@^3.2.0 & @vitejs/plugin-vue@^1.4.0

Vue 3.2 introduces the defineCustomElement method, which works with SFCs. By default, tags inside SFCs are extracted and merged into CSS files during build. However when shipping a library of custom elements, it may be desirable to inline the styles as JavaScript strings and inject them into the custom elements' shadow root instead.

Starting in 1.4.0, files ending with *.ce.vue will be compiled in "custom elements" mode: its tags are compiled into inlined CSS strings and attached to the component as its styles property:

Note in custom elements mode there is no need to use since the CSS is already scoped inside the shadow DOM.

The customElement plugin option can be used to configure the behavior:

• { customElement: true } will import all *.vue files in custom element mode. • Use a string or regex pattern to change how files should be loaded as Custom Elements (this check is applied after include and exclude matches).

License

MIT

Description from the npm listing.