Get started

Use in Vue

Vue 3.5 uses the components as they are: every gw- element is a native custom element.

Tell Vue about the elements

Vue's template compiler has to leave gw- tags alone, so it doesn't look for Vue components by those names:

vite.config.ts

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('gw-'),
    },
  },
})

Load the Vue types once, and templates check every gw- element's properties and events:

env.d.ts

import '@greenwolf/ui/vue'

Vue sets a property when the element has one, so objects and arrays reach the component as they are.
Listen to a component's events by their name: @gw-change="…".
For two-way binding, pair :value with the component's change event.