@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

Dual-licensed: GNU AGPL v3 or later, or a commercial licence for use the AGPL does not permit — see LICENSE-COMMERCIAL.md, or email [email protected].