vite-plugin-vue-ce
v0.3.0
Published
Vite plugin for auto registering Vue custom elements imported from HTML
Readme
vite-plugin-vue-ce
Automatically register Vue custom elements by using HTML script tags.
Installation
npm install vite-plugin-vue-ce --save-devUsage
// vite.config.js
import vue from '@vitejs/plugin-vue';
import vueCustomElements from 'vite-plugin-vue-ce';
export default {
plugins: [vueCustomElements(), vue()],
};<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script type="module" src="./src/components/MyComponent.ce.vue"></script>
</head>
<body>
<my-component></my-component>
</body>
</html>Options
customElements
vueCustomElements({
customElements: {
YourComponent: './src/components/MyComponent.ce.vue',
'x-app': './src/components/VApp.ce.vue',
},
});interface Options {
customElements?: Record<string, string>;
}Maps a custom element name to a component file path.
The key is the element name (PascalCase or kebab-case) and the value is the component file path. PascalCase keys are converted to kebab-case automatically (e.g. MyComponent → my-component).
Required when the lib option is true.
lib
vueCustomElements({
customElements: { ... },
lib: true
})interface Options {
lib?: boolean;
}When true, Vite generates a single JS file that registers the custom elements explicitly listed in the customElements option.
When false (default), Vite generates assets for index.html including the custom elements referenced in it.
optionFile
vueCustomElements({
optionFile: './src/ce-options.js',
});// ./src/ce-options.js
import { pinia } from './store';
export default (name, component) => ({
shadowRoot: false,
configureApp(app) {
app.use(pinia);
},
});interface Options {
optionFile?: string;
}
type CustomElementOptionFactory = (
name: string,
component:
| (ComponentOptions & CustomElementOptions)
| ComponentOptions['setup']
) => CustomElementOptions;Specifies a module whose default export is a factory function. The factory receives the custom element name and component options and returns CustomElementOptions, passed as the second argument to defineCustomElement. Applies to all custom elements registered by this plugin.
customElementPrefix
vueCustomElements({
customElementPrefix: 'x-',
});interface Options {
customElementPrefix?: string;
}Prepends a prefix to all custom element names registered by this plugin, including those explicitly mapped via customElements. For example, with customElementPrefix: 'x-', MyComponent becomes x-my-component.
include
vueCustomElements({
include: ['templates/**/*.html', 'components/**/*.ce.vue'],
});interface Options {
include?: string | RegExp | (string | RegExp)[];
}Restricts auto custom element registration to matched files only.
Vue components not matched by this option will not be registered as custom elements, and .ce.vue script tags in unmatched HTML entry points will not be transformed.
The default value is [/\.ce\.vue$/, /\.html$/].
exclude
vueCustomElements({
exclude: ['static/**/*.html', 'private/**/*.ce.vue'],
});interface Options {
exclude?: string | RegExp | (string | RegExp)[];
}Disables auto custom element registration for matched files.
Vue components matched by this option will not be registered as custom elements, and .ce.vue script tags in matched HTML entry points will not be transformed.
License
MIT