Draggable Tree View For Vuetify

Install & Download:

# Yarn
$ yarn add vuedraggable
# NPM
$ npm i vuedraggable --save

Description:

A tree view component for Vuetify framework that allows the user to reorder parent & child nodes with drag and drop.

Basic usage:

1. Install and import the component.

import VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)

2. Add the draggable tree view component to the template.

<template>
  <v-draggable-treeview
    group="example"
    v-model="items"
  ></v-draggable-treeview>
</template>

3. Add nodes to the tree view.

export default {
  data() {
    return {
      items: [{ id: 1, name: "node-1", children: [{ id:11, name: "node1-1" }] }]
    }
  }
}

Preview:

Changelog:

v0.0.6 (09/11/2020)

• Feature/change expand icon

v0.0.5 (08/08/2020)

• Fix label slot for children nodes not working