Nested Tree View Component For Vue 3

A checkable, searchable, and nested tree view component based on Vue 3 Composition API.

How to use it:

1. Install and register the tree component.

import { ref } from "vue";
import Tree from "vue3-tree";
export default {
  components: {
    Tree,
  },
  // ...
};

2. Add the tree component together with a search field to the template.

<template>
  <input v-model="searchText" type="text" />
  <Tree
    :nodes="data"
    :search-text="searchText"
    @onNodeExpanded="onNodeExpanded"
    @onCheckboxToggle="onCheckboxToggle"
    @onDataUpdated="onDataUpdated"
    @onToggleParentCheckbox="onToggleParentCheckbox"
  />
</template>

3. Render a tree in your app.

export default {
  components: {
    Tree,
  },
  setup() {
    const data = ref([
      {
        id: "1",
        label: "a",
        nodes: [
          {
            id: "4",
            label: "aa",
          },
          {
            id: "5",
            label: "ab",
          },
        ],
      },
      {
        id: "2",
        label: "b",
        nodes: [
          {
            id: "6",
            label: "ba",
            nodes: [
              {
                id: "11",
                label: "aaaa",
                nodes: [
                  {
                    id: "15",
                    label: "aaaa",
                  },
                  {
                    id: "16",
                    label: "bbbb",
                  },
                ],
              },
              {
                id: "12",
                label: "bbbb",
              },
            ],
          },
          {
            id: "7",
            label: "bb",
            nodes: [
              {
                id: "13",
                label: "cccc",
              },
              {
                id: "14",
                label: "dddd",
              },
            ],
          },
        ],
      },
      {
        id: "3",
        label: "c",
      },
    ]);
    const searchText = ref("");
    const onNodeExpanded = (node, state) => {
      // console.log('state: ', state)
      // console.log('node: ', node)
    };
    const onCheckboxToggle = (node, state) => {
      // console.log('checkbox state: ', state)
      // console.log('checkbox node: ', node)
    };
    const onToggleParentCheckbox = (node, state) => {
      // console.log('parent checkbox state: ', state)
      // console.log('parent checkbox node: ', node)
    };
    return {
      data,
      searchText,
      onNodeExpanded,
      onCheckboxToggle,
      onToggleParentCheckbox,
    };
  },
};

4. Available component props.

nodes: {
  type: Array,
  required: true,
},
props: {
  type: Object,
  default() {
    return {
      nodes: 'nodes',
      label: 'label',
    }
  },
},
indentSize: {
  type: Number,
  default: 10,
},
gap: {
  type: Number,
  default: 10,
},
searchText: {
  type: String,
  default: '',
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},
expandAllRowsOnSearch: {
  type: Boolean,
  default: true,
},

5. Available treeRow props.

node: {
  type: Object,
  required: true,
},
indentSize: {
  type: Number,
  required: true,
},
gap: {
  type: Number,
  required: true,
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},

Preview:

Changelog:

v0.11.1 (02/17/2022)

• Customize build and add types

v0.11.0 (02/12/2022)

• Remove unnecessary emits

v0.10.0 (12/11/2021)

• Fix typo

v0.9.0 (11/30/2021)

• Add node props to checkbox slot

v0.8.0 (11/29/2021)

• Fix space problem in TreeRow

v0.7.1 (11/24/2021)

• Change class and slot name for delete icon

v0.6.6 (11/15/2021)

• Update

v0.6.3 (09/28/2021)

• Update data based on useCheckbox value

v0.6.2 (09/27/2021)

• Check callback in updateNode

v0.6.0 (09/13/2021)

• feat: add hover style for rows

v0.5.1 (09/04/2021)

• Remove depth prop

v0.4.0 (09/04/2021)

• Remove useless this

v0.3.1 (08/27/2021)

• make filtering case sensitive

Download Details:

Author: teamseodo

Live Demo: https://codesandbox.io/s/boring-leaf-v7b2s?file=/src/App.vue

Download Link: https://github.com/teamseodo/vue3-tree/archive/refs/heads/master.zip

Official Website: https://github.com/teamseodo/vue3-tree

Install & Download:

# Yarn
$ yarn add vue3-tree

# NPM
$ npm i vue3-tree --save