@vue-dnd-kit/nuxt

@vue-dnd-kit/nuxt

Official Nuxt module for Vue DnD Kit — a lightweight, high-performance drag and drop library for Vue 3.

• 📖 Documentation
• ✨ Release Notes

Features

• Auto-imports all composables (makeDraggable, makeDroppable, makeSelectionArea, and more)
• Registers DnDProvider and DragPreview as global components — use them in templates without importing
• Fully SSR-compatible — no hydration mismatches, content rendered on server

Quick Setup

npm install @vue-dnd-kit/nuxt @vue-dnd-kit/core

Add to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@vue-dnd-kit/nuxt'],
})

Usage

Wrap your layout with DnDProvider, then use composables inside child components. makeDraggable and other composables rely on inject — they must run inside a descendant of DnDProvider, not in the same component.

<!-- layouts/default.vue -->
<template>
  <DnDProvider>
    <slot />
    <DragPreview />
  </DnDProvider>
</template>

<!-- components/DraggableItem.vue -->
<script setup>
const el = useTemplateRef('el');
makeDraggable(el, {
  payload: () => [0, items.value],
});
</script>

<template>
  <div ref="el">Drag me</div>
</template>

For TypeScript types, import explicitly from the core package:

import type { IDragEvent, IDragItem } from '@vue-dnd-kit/core';

Compatibility

License

MIT