Sortable Tree Structure Component - Vue-Tree-Dnd

Install & Download:

# NPM
$ npm install vue-tree-dnd@latest

Description:

Vue-Tree-Dnd is a Vue 3 tree view plugin that allows developers to create a sortable, draggable, hierarchical tree structure for their apps.

How to use it:

1. Install and import the VueTreeDnD component.

import { ref } from 'vue'
import VueTreeDnd from 'vue-tree-dnd';
import MyTreeItemRenderer from './my-tree-item.vue'

2. Define your items to be displayed in the tree.

const tree = ref([
  {
    id: 1,
    name: 'Item 1',
    children: [
      {
        id: 2,
        name: 'Item 2',
        children: [
          {
            id: 3,
            name: 'Item 3',
            expanded: true,
            children: [
              // ...
            ]
          }
        ]
      }
    ]
  }
])

3. Add the VueTreeDnd component to your app.

<template>
  <VueTreeDnd
    :component="MyTreeItemRenderer"
    :tree="tree"
    :locked="false"
    @move="moveHandler"
  />
</template>
const moveHandler = (event) => {
  console.log(event)
}