Vue

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

{
  "compilerOptions": {
    "types": [
      // Required: Enables JSX type support for Vue
      "@staticbolt/wcp/types/vue",

      // Optional: Adds native DOM types (e.g. `querySelector`, `document`)
      "@staticbolt/wcp/types/dom",

      // Optional: Exposes component types globally (no imports needed)
      "@staticbolt/wcp/types/global",
    ],
  },
}

This provides TypeScript support for the web components in your Vue application.

Importing Web Components

Web components are registered globally in the browser. Import them once in your application’s entry point:

import "@staticbolt/wcp/[component-name]";

Important: Do not import web components in multiple files. Import them only once at application startup.

Setting Properties

Use the v-bind.[propertyName].prop or :[propertyName].prop syntax to set JavaScript properties:

<component-name v-bind.opened.prop="isOpen" :disabled.prop="isDisabled"></component-name>

Setting Attributes

Use regular JSX syntax for HTML attributes:

<component-name disabled="true"></component-name>

Handling Events

Use v-on.[eventName] or @[eventName] syntax to listen for custom events:

<component-name v-on:clicked="handleClick" @opened="handleExpand"></component-name>

Using Slots

Use children to render the content of the web component:

<component-name>
  <span slot="title">Title</span>
  <span>Content</span>
</component-name>