Vue Adapter

comins-sortable@0.1.6

Playground paths below are local routes for the module repository’s development server. They are not live routes on this documentation site.

Vue uses v-model on SortableArea and an item slot for direct sortable children.

<script setup lang="ts">
import { ref } from 'vue';
import { SortableArea, SortableRoot } from 'comins-sortable/vue';

type Item = { id: string; label: string };
const items = ref<Item[]>([
  { id: 'task-1', label: 'Plan' },
  { id: 'task-2', label: 'Build' },
]);
</script>

<template>
  <SortableRoot>
    <SortableArea v-model="items" area-id="tasks" item-key="id">
      <template #item="{ item }">
        <div>{{ item.label }}</div>
      </template>
    </SortableArea>
  </SortableRoot>
</template>

v-model handles the update:modelValue controlled commit. Areas in one root share its scope. Use @change on SortableRoot for the complete immutable transaction and :on-error for an application error boundary.

Use tag for an intrinsic tag or component host and componentProps for host attributes. The host must forward its element so the adapter can register it.

Playground: /examples/simple/vue

Template type checking

The item model determines the type of item-key, the item slot, copyItem, and update:modelValue. Check actual .vue files with Vue’s SFC type checker; checking only TypeScript files does not validate template inference. Explicit SortableArea<Item> with h() remains supported. A parent Root does not infer its transaction item type from child Areas automatically.

---

Runnable example · Source guide for this version