@composy/kanban-vue

@composy/kanban-vue

Vue 3 adapter for @composy/kanban-core. It exports the Kanban component, useKanban composable, Vue plugins, and the core board API and types.

Install

pnpm add @composy/kanban-vue vue

Quick start

<script setup lang="ts">
import type { Card } from '@composy/kanban-vue'
import { Kanban } from '@composy/kanban-vue'

const columns = [
  { id: 'todo', title: 'To do', cards: [{ id: 'task-1', title: 'Review design' }] },
  { id: 'done', title: 'Done', cards: [] },
]

function onCardMove(card: Card, from: string, to: string, index: number) {
  window.dispatchEvent(new CustomEvent('kanban-card-move', { detail: { card, from, to, index } }))
}
</script>

<template>
  <Kanban :columns="columns" @card-move="onCardMove" />
</template>

The component accepts initial columns, title, drag options, visibility options for add buttons and card counts, and container class/style attributes. It emits ready, destroy, error, card events, and column events. See Kanban.vue for the full prop and event signatures.

Composable

Use useKanban when the view needs explicit access to the board instance and its operations:

import { useKanban } from '@composy/kanban-vue'
import { ref } from 'vue'

const container = ref<HTMLElement | null>(null)
const kanban = useKanban({
  container,
  options: { columns: [{ id: 'todo', title: 'To do', cards: [] }] },
})

// Bind container to an element in the component template, then use:
kanban.addColumn({ id: 'done', title: 'Done' })

Package structure

• src/components/ — Vue components.
• src/composables/ — Vue composables.
• src/plugins/ — Vue plugin integrations.
• src/types/ — adapter types.

Builder and TypeScript configuration live in .ldesign/. The package is built with @composy/builder and rolldown.

License

MIT