@colletdev/vue

Vue 3.3+ wrappers (Composition API) for the Collet component library. Typed props, emits, and template refs over 48 Rust/WASM Custom Elements.

Install

npm install @colletdev/vue @colletdev/core

Quick Start

<script setup lang="ts">
import { init, Button, TextInput } from '@colletdev/vue';

await init(); // once, at app startup
</script>

<template>
  <Button variant="filled" label="Save" intent="primary" @cx-click="save" />
  <TextInput label="Email" kind="email" @cx-input="onInput" />
</template>

Features

• Typed props -- union-literal types for all component enums
• Typed emits -- @cx-click, @cx-change, @cx-input, etc. with typed detail
• Template refs -- expose()-based refs for imperative methods (.open(), .close())
• Structured data -- SelectOption[], TableColumn[], AccordionItem[] fully typed
• Ships compiled -- dist/ contains ready-to-use .js and .d.ts files

Volar Support

For global type checking of <cx-*> tags in templates, add to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@colletdev/vue/global"]
  }
}

This enables autocomplete and type checking on raw Custom Element tags alongside the Vue wrapper components.

Event Pattern

Custom events use the cx- prefix. Vue's @ shorthand works as expected:

<template>
  <Select label="Country" :options="countries" @cx-change="setCountry" />
</template>

API Reference

See @colletdev/docs for the full props/events reference and framework guides.

License

MIT -- github.com/Danrozen87/collet