How to import Tree component?

[satvikpendem]

I'm trying to import the Tree component inside my own component, but I'm getting an error that the component is not registered properly:

My approach:

<template>
  <div id="task-item">
    <Tree :data="nodes" draggable cross-tree>
      <div slot-scope="{data}">
        <span>{{data.text}}</span>
      </div>
    </Tree>
  </div>
</template>

<script>
import Tree from "vue-draggable-nested-tree";

export default {
  name: "task-item",
  props: ["nodes"],
  components: {
    'Tree': Tree
  }
};
</script>

Warning:

[Vue warn]: Unknown custom element: <Tree> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TaskItem> at src/components/Task/TaskItem.vue
       <TaskList> at src/components/Task/TaskList.vue
         <TaskView> at src/views/TaskView.vue
           <App> at src/App.vue
             <Root>

Also, I know I need to import the Tree from DraggableTree. I tried

import Tree from "vue-draggable-nested-tree/DraggableTree"

but it doesn't work. How do I import it like in your examples?

[phphe]

import {Tree, TreeNode, DraggableTree, DraggableTreeNode} from 'vue-draggable-nested-tree' check https://github.com/phphe/vue-draggable-nested-tree#import

[phphe]

you may want import {Tree} from 'vue-draggable-nested-tree' or import {DraggableTree} from 'vue-draggable-nested-tree'

[satvikpendem]

I used DraggableTree, it worked, thanks. I just forgot the { } even for a single import (import {DraggableTree} instead of import DraggableTree)

What is the difference between each of the Tree, TreeNode, DraggableTree, DraggableTreeNode?

Also, is there any way to have recursive components, so I can for example have a TaskList, composed of TaskItem components, and parent talks to children and vice versa? Similar to https://jsfiddle.net/dede89/bfksoj5b/9/ from the VueDraggable package. Because I want to modularize the code base instead of having a big template in the TaskList view.

[phphe]

Tree, TreeNode can't be dragged. Tree, TreeNode, DraggableTree, DraggableTreeNode are exposed for who want extend them. sorry, I can't understand the third paragraph.

[satvikpendem]

If you go to the jsfiddle link, it has a draggable todo list that has recursive components, like the tree node calls itself. Is something like that possible in this library?

[phphe]

It may be unnecessary to use recursive components. However, the name of TreeNode and DraggableTreeNode is TreeNode.