vue

Configure Vue projects to treat dash-containing tags as custom elements.

46|4|Updated May 27, 2025

Search Tags:#vue #web-components #custom-elements #vue-3 #compiler-options #isCustomElement #vue-2

Ready to run

npx skills add https://github.com/bennypowers/cem --skill vue-bennypowers

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Guidance for Vue 3 with Vite and Vue CLI to correctly treat dash-containing custom element tags as custom elements.
Step-by-step instructions for Vue 2 (Nuxt/webpack) compatibility, including global config or plugin-based approaches.
Example configurations for isCustomElement in Vite, Vue CLI, and Nuxt, plus TypeScript declarations for element typings.

Quick Start

Configure your Vue project to treat dash-containing tags as custom elements and import your element library.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I use custom elements in Vue 3 without Vue treating them as unknown components?▼

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.

What is the best way to configure isCustomElement for custom elements in a Vite Vue project?▼

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.

Does this custom element configuration approach work for Vue 2 and Nuxt projects?▼

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.

Why are my web components failing to render in my Vue CLI application?▼

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.

How do I add TypeScript declarations for custom element typings in Vue?▼

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.

Can I detect the Vue version to apply the correct custom element configuration automatically?▼

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.