Draggable Nested Tree Component - he-tree-vue

Install & Download:

# NPM
$ npm install @he-tree/vue --save

Description:

he-tree-vue is a Vue.js component to render a nested tree view that allows you to resort nodes via drag and drop.

More features:

Checkable nodes with checkboxes.
Filterable nodes with a search box.
Expand & collapse nodes with click.

Basic usage:

1. Install & import.

import { BaseTree, Draggable } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'

2. Create a tree component in your template.

<template>
  <BaseTree v-model="treeData" />
</template>

3. Register the component.

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>