vue3-tree

Getting Started

Installation

Install the vue3-tree package:

npm install vue3-tree
1

or

yarn add vue3-tree
1

Quick Start

After installiation, you need to import it in the component and define it in the template as shown below. If you want to see your own data in the tree structure, you can define your data here by adhering to certain parameters in the data.

<template>
  <Tree v-model:nodes="data" />
</template>

<script>
import { ref } from 'vue';
import Tree from 'vue3-tree';

export default {
  components: {
    Tree,
  },
  setup() {
    const data = ref([
      {
        id: 1,
        label: 'Animal',
        nodes: [
          {
            id: 2,
            label: 'Dog',
          },
          {
            id: 3,
            label: 'Cat',
            nodes: [
              {
                id: 4,
                label: 'Egyptian Mau Cat',
              },
              {
                id: 5,
                label: 'Japanese Bobtail Cat',
              },
            ],
          },
        ],
      },
      {
        id: 6,
        label: 'People',
      },
    ]);

    return {
      data,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50