Vue3 DnD

DndProvider

The DndProvider component provides Vue3 DnD functionality to your application. It must inject a Backend via the backend prop.

Usually we use it in App.vue file.

usage

PC side 

<script setup lang="ts">
import { DndProvider } from 'vue3-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
</script>

<template>
  <DndProvider :backend="HTML5Backend">
    <!-- Your Drag-and-Drop Application -->
  </DndProvider>
</template>

copy success

Mobile 

<script setup lang="ts">
import { DndProvider } from 'vue3-dnd'
import { TouchBackend } from 'react-dnd-touch-backend'
</script>

<template>
  <DndProvider :backend="TouchBackend">
    <!-- Your Drag-and-Drop Application -->
  </DndProvider>
</template>

copy success

Props

ParametersDescriptionTypeRequired
backendA React DnD BackendBackendis
contextThe context object used to configure Backend; this depends on the Backend implementation.objectno
optionsThe options object used to configure Backend; this depends on the Backend implementation.objectno