vite-plugin-cem
Advanced tools
Build automaticaly the manifest of your custom-elements. This plugin use the @custom-elements-manifest/analyzer to build the manifest. Here is what the plugin does depending on the environnement.
See the custom-elements-manifest repository to get more information about the manifest.
Run one of the following command to install the plugin.
$ npm i vite-plugin-cem --save-dev
Add VitePluginCustomElementsManifest plugin to vite.config.js and configure it :
import { defineConfig } from 'vite'
import VitePluginCustomElementsManifest from 'vite-plugin-cem';
export default defineConfig({
plugins: [
VitePluginCustomElementsManifest({
files: ['./src/title-element.ts']
})
]
})
Using the api-viewer-element in your html :
<body>
<api-viewer src="/custom-elements.json" selected="title-element"></api-viewer>
<script type="module" src="/src/main.ts"></script>
</body>
This plugin support custom-elements-manifest/analyzer plugins. You can get more information about these plugins here. This is an example how to use plugins.
First install the plugin :
$ npm install --save-dev cem-plugin-jsdoc-example
And register it using the plugins field :
import { defineConfig } from 'vite'
import VitePluginCustomElementsManifest from 'vite-plugin-cem';
import { jsdocExamplePlugin } from 'cem-plugin-jsdoc-example';
export default defineConfig({
plugins: [
VitePluginCustomElementsManifest({
files: ['./src/title-element.ts'],
lit: true,
plugins: [
jsdocExamplePlugin(),
]
})
]
})
Yes, it's pluginsception !
This is all current options of the plugin :
export interface VitePluginCustomElementsManifestOptions extends CreateManifestOptions {
/**
* Define where will be serve the manifest.
* This option only work in development mode.
* @default '/custom-elements.json'
*/
endpoint?: string,
/**
* Define where will be build the final manifest.
* This option only work in production mode.
* @default 'custom-elements.json'
*/
output?: string,
/**
* Add the custom-elements-manifest field to the package.json.
* @default false
*/
packageJson?: boolean,
/**
* Register files which will be used to build the manifest.
* You can use pattern to find files.
* @default []
*/
files?: string[],
}
interface CreateManifestOptions {
/**
* Use the lit plugin to parse files
*/
lit?: boolean,
/**
* Use the fast plugin to parse files
*/
fast?: boolean,
/**
* Use the stencil plugin to parse files
*/
stencil?: boolean,
/**
* Use the catalyst plugin to parse files
*/
catalyst?: boolean,
/**
* Run the builder in dev mode.
* @default false
*/
dev?: boolean,
/**
* Use ``custom-elements-manifest/analyzer`` plugins.
* Get more information about these plugins here:
*
* https://custom-elements-manifest.open-wc.org/analyzer/plugins/intro/
*/
plugins?: Plugin[],
}
We would love you for the contribution to vite-plugin-cem project, check the CONTRIBUTING file for more info.
FAQs
Custom elements manifest builder for Vitejs
We found that vite-plugin-cem demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.