@typed-draggable/nuxt

Nuxt module for typed-vuedraggable - Vue.js draggable component with full TypeScript support powered by Sortable.js.

• ✨  Release Notes

Features

• 🚀 Full TypeScript support - Complete type definitions for all props and events
• 🎨 Auto-import - Components are automatically available in your templates
• 📦 Small bundle - Only includes what you need
• 🔄 Two-way binding - Works with v-model for seamless data synchronization
• 🎯 Slot-based API - Flexible item rendering with header and footer slots
• 🔀 Multi-list support - Drag and drop between multiple lists
• 🎬 Transition support - Works with Vue transitions out of the box

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @typed-draggable/nuxt

Or install manually:

# npm
npm install @typed-draggable/nuxt

# pnpm
pnpm add @typed-draggable/nuxt

# yarn
yarn add @typed-draggable/nuxt

Then add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@typed-draggable/nuxt'],
  draggable: {
    // module options
    prefix: '', // optional prefix for component name
  },
})

That's it! You can now use the Draggable component in your Nuxt app ✨

Usage

Basic Example

<template>
  <Draggable v-model="items" item-key="id" ghost-class="ghost">
    <template #item="{ element }">
      <div class="item">{{ element.name }}</div>
    </template>
  </Draggable>
</template>

<script setup lang="ts">
interface Item {
  id: number
  name: string
}

const items = ref<Item[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
])
</script>

Two Lists with Shared Group

<template>
  <div class="lists">
    <Draggable v-model="listA" item-key="id" group="shared">
      <template #item="{ element }">
        <div class="item">{{ element.name }}</div>
      </template>
    </Draggable>

    <Draggable v-model="listB" item-key="id" group="shared">
      <template #item="{ element }">
        <div class="item">{{ element.name }}</div>
      </template>
    </Draggable>
  </div>
</template>

With Header and Footer Slots

<template>
  <Draggable v-model="items" item-key="id">
    <template #header>
      <div class="header">Header - Not draggable</div>
    </template>

    <template #item="{ element, index }">
      <div class="item">{{ index + 1 }}. {{ element.name }}</div>
    </template>

    <template #footer>
      <div class="footer">Footer - Not draggable</div>
    </template>
  </Draggable>
</template>

With Custom Tag

<template>
  <Draggable v-model="items" item-key="id" tag="ul">
    <template #item="{ element }">
      <li>{{ element.name }}</li>
    </template>
  </Draggable>
</template>

With Transitions

<template>
  <Draggable v-model="items" item-key="id" tag="TransitionGroup" :component-data="{ name: 'list' }">
    <template #item="{ element }">
      <div class="item">{{ element.name }}</div>
    </template>
  </Draggable>
</template>

<style>
.list-move {
  transition: transform 0.3s;
}
</style>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | v-model / modelValue | T[] | null | The list of items (two-way bound) | | list | T[] | null | Alternative to v-model (one-way) | | itemKey | string \| ((item: T) => string \| number) | required | Unique key for each item | | tag | string | 'div' | HTML tag or component name for the container | | clone | (item: T) => T | (x) => x | Function to clone items | | move | (evt, originalEvent) => boolean \| void | null | Function to determine if move is allowed | | componentData | object | null | Props to pass to the container component |

All Sortable.js options are also supported as props (e.g., group, sort, delay, animation, handle, ghostClass, etc.).

Events

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | T[] | Emitted when the list changes | | change | ChangeEvent<T> | Emitted on add, remove, or move with details | | start | SortableEvent | Drag started | | end | SortableEvent | Drag ended | | add | SortableEvent | Item added to list | | remove | SortableEvent | Item removed from list | | update | SortableEvent | Item moved within list | | choose | SortableEvent | Item chosen | | unchoose | SortableEvent | Item unchosen | | sort | SortableEvent | Sorting changed | | filter | SortableEvent | Tried to drag filtered item | | clone | SortableEvent | Clone created |

TypeScript

The module provides full TypeScript support. Import types as needed:

import type { 
  ChangeEvent, 
  AddedEvent, 
  RemovedEvent, 
  MovedEvent,
  MoveEventContext 
} from '@typed-draggable/nuxt/runtime/types'

function handleChange(event: ChangeEvent<MyItem>) {
  if ('added' in event) {
    console.log('Added:', event.added.element)
  }
}

Important Notes

• The component only works on the client side (uses SortableJS which requires DOM)
• Wrap in <ClientOnly> if needed for SSR applications
• itemKey prop is required and must return unique values for each item

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the module
pnpm run prepack

# Run tests
pnpm run test

License

MIT License