Vue import '@fusion.dev/helix/vue' Add this types-only import once. It augments Vue's GlobalComponents, so every Helix tag in an SFC template has typed props and events. The generated file declares the augmentation under both vue and @vue/runtime-core, because different tools read different ones. Report a misspelled prop vue-tsc checks the value of each prop a Helix tag declares. By default, it does not report a prop name that the tag does not declare, so a misspelled prop compiles. To report one, turn on checkUnknownProps in tsconfig.json: { "vueCompilerOptions": { "checkUnknownProps": true } } strictTemplates turns it on with the rest of Vue's strict template checks. Either option also reports a data-* attribute on a Helix tag. Mark Helix tags as custom elements Without this setting, Vue treats <helix-button> as a component it cannot find and logs a warning on every render. // vite.config.ts export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('helix-') } }, }), ], }) The prefix test is enough. Every Helix element name starts with helix-, in both tiers, and no other name in the library does. Pass props and bind events Vue sets a property when the element has one, and sets an attribute otherwise. That works for every Helix element. A string goes through either path, and an array or an object goes through the property. <helix-data-table label="People" :rows="people" /> <helix-tabs @helix-before-activate="onActivate" /> @helix-before-activate binds with addEventListener, so use the event's own name. Vue needs no bridge and no wrapper. The compiler setting above is the only setup. To force a property, use .prop. You may need it where a string would be ambiguous: <helix-input :value.prop="'42'" /> You will rarely need .prop. Seed, mirror, or refuse a value value, open, checked, and active are seeds. The element starts with the value you set and then applies its own changes, so all three of these patterns work. See State and control. <!-- Seeded: the element owns it from there. --> <helix-input default-value="Ada" label="Name" /> <!-- Mirrored: bind the notification and let the element apply. --> <helix-input label="Name" @change="name = ($event.currentTarget as HelixInput).value" /> <!-- Refused: you take the decision for this one change. --> <helix-input :value="name" label="Name" @helix-before-change="$event.preventDefault(); name = clean($event.detail.value)" /> For a native event such as change, vue-tsc types $event.currentTarget as EventTarget | null, which has no value. The mirrored line casts it to the element's class, which you import as a type from the family's subpath: <script setup lang="ts"> import type { HelixInput } from '@fusion.dev/helix/input' </script>