@klad/vue
@klad/vue
The Vue 3 adapter for Klad — a tree
engine that stays smooth where a chart made of elements cannot, by laying out and
drawing the tree on a <canvas> inside a Web Worker, overlaying real Vue
components only for the nodes currently on screen and zoomed in far enough to
read.
npm install @klad/vue
Peer dependency: vue >=3.5 <4.
<script setup lang="ts">
import { Klad } from '@klad/vue'
import type { Options } from '@klad/vue'
const options: Options = {
data: [
{ id: 'ceo', name: 'Jamie Fox', title: 'CEO' },
{ id: 'cto', parentId: 'ceo', name: 'Amy Chen', title: 'CTO' },
],
}
</script>
<template>
<Klad :options="options" style="width: 100%; height: 100vh">
<template #node="{ item, hasChildren, open, toggle }">
<div class="card">
<strong>{{ String(item.name ?? '') }}</strong>
<button v-if="hasChildren" type="button" @click="toggle">
{{ open ? '−' : '+' }}
</button>
</div>
</template>
</Klad>
</template>
Reach the imperative API from a descendant component with useKlad()
(const { api, state } = useKlad()), or from a template ref on
<Klad> itself.
Guide, API reference and roadmap: the documentation.
Licence
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.12.0 | >=3.5 <4 | MIT | |
| 1.11.2 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.11.1 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.11.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.10.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.9.1 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.9.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.8.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.7.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.6.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.5.1 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.5.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.4.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.3.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.2.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.1.0 | >=3.5 <4 | AGPL-3.0-or-later | |
| 1.0.0 | >=3.5 <4 | AGPL-3.0-or-later |
Pre-releases (1)
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.0-alpha.0 | >=3.5 <4 | AGPL-3.0-or-later |