Minimal Nested Tree View Component For Vue.js – Teatree

Install & Download:

# Yarn
$ yarn add vue-teatree
# NPM
$ npm i vue-teatree --save

Description:

A lightweight, dependency-free Vue.js component to render a nested, collapsible tree view from any data structure you define.

How to use it:

1. Import the Teatree into your Vue.js project.

import { Teatree, NodeType, NodeName, NodeToggle } from "vue-teatree";

2. Add the Teatree component to the template.

<Teatree :roots="data">
  <template slot="node-toggle" slot-scope="{ node }">
    <NodeToggle :node="node" />
  </template>
  <template slot="node-name" slot-scope="{ node }">
    <NodeName
      :node="node"
      :handleNodeLeftClick="() => {}"
      :handleNodeRightClick="() => {}"
    />
  </template>
</Teatree>

3. Pass your data to the tree view.

• name: node name
• show: show or hide the node
• showChildren: show children
• selected: is selected or not
• children: child nodes
• icon: custom icon

const data: NodeType[] = [
  {
    name: "node-1",
    show: true,
    showChildren: true,
    selected: false,
    children: [
      {
        name: "node-1-1",
        show: true,
        showChildren: true,
        selected: false,
        children: [
          {
            name: "node-1-1-1",
            show: true,
            showChildren: true,
            selected: false,
            children: [],
          },
        ],
      },
    ],
  },
];