Nested Tree View Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-tree
# NPM
$ npm i vue3-tree --save

Description:

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,
},