Configure Vue projects to treat dash-containing tags as custom elements.
npx skills add https://github.com/bennypowers/cem --skill vue-bennypowers
Please help me install this Agent Skill. Skill: vue Source: https://github.com/bennypowers/cem/tree/main/extensions/claude-code/skills/vue Command: npx skills add https://github.com/bennypowers/cem --skill vue-bennypowers
Using web components inside Vue can be tricky due to isCustomElement handling and version-specific config; this skill shows how to integrate custom elements with Vue across versions.
Configure your Vue project to treat dash-containing tags as custom elements and import your element library.
High-intent search queries and answers about installing and using this skill.
To use custom elements in Vue 3, configure the compiler options to identify web components using isCustomElement. This ensures Vue treats dash-containing tags as native custom elements rather than unknown Vue components.
Configuring isCustomElement in Vite involves updating the vue compiler options within your vite.config.js file. You provide a check function, typically testing if a tag includes a dash, to register native web components correctly.
Yes, the approach supports Vue 2 and Nuxt setups. It provides step-by-step compatibility instructions for webpack or Nuxt configurations, often using global config or plugin-based approaches to recognize custom elements.
Web components fail to render in Vue CLI applications when isCustomElement is not configured in the compiler options. You must modify your vue.config.js to detect dash-containing tags so Vue renders them as native custom elements.
You add TypeScript declarations for custom element typings by defining element interfaces in your project's type declaration files. This ensures proper type checking and autocomplete support when using web components in Vue templates.
Yes, the configuration defines required steps for detecting the Vue version. This allows you to dynamically apply the correct compiler options, ensuring native element usage compatibility across Vue 2 and Vue 3 setups.
luyi985Document TypeScript compiler options for reliable type checking.
NAMEWTAGuide Element Plus Vue 3 component installation, theming, and API usage.
sayali-ingle-pdlGenerate a Vue 3 vite.config.ts with build, dev server, and plugin settings.
partme-aiProvides guidance for Vue 2.x development including components, routing, and Vuex state management.
