MatijaNovosel / vue-tree-view

A tree view component for Vue 3.

Vue tree view

A tree view component for Vue 3.

🚀 Installation

Install using your package manager of choice:

yarn add vue-tree-view

📺 Demo

https://matija-components.vercel.app/tree-view

⚙️ Usage

Import the component locally or define it globally and include the css file:

<template>
  <div style="display: flex">
    <tree-view
      color="blue"
      :items="treeViewItems"
      v-model="treeViewSelection"
      dense
      open-all
    />
    {{ treeViewSelection.sort() }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { TreeView } from "vue-tree-view";
import "vue-tree-view/dist/style.css";

const treeViewItems = [
  {
    id: 1,
    name: "ID 1",
    children: [
      { id: 2, name: "ID 2" },
      { id: 3, name: "ID 3" },
      { id: 4, name: "ID 4" }
    ]
  },
  {
    id: 5,
    name: "ID 5",
    children: [
      {
        id: 6,
        name: "ID 6",
        children: [
          {
            id: 7,
            name: "ID 7",
            children: [
              { id: 8, name: "ID 8" },
              { id: 9, name: "ID 9" }
            ]
          }
        ]
      },
      {
        id: 10,
        name: "ID 10",
        children: [
          {
            id: 11,
            name: "ID 11",
            children: [
              { id: 12, name: "ID 12" },
              { id: 13, name: "ID 13" },
              { id: 14, name: "ID 14" }
            ]
          }
        ]
      }
    ]
  }
];

const treeViewSelection = ref([]);
</script>

📃 Props

Name	Type	Default	Description
v-model	number[]		Standard two way input
dense	boolean	false	Changes the style of the component to a more compact design
open-all	boolean	false	All nodes will be opened on component load
disabled	boolean	false	Makes the component uninteractable
selectable	boolean	true	Allows the user to select nodes
radio	boolean	false	Alternate selection item, uses a radio instead of the default checkbox
unopenable	boolean	false	Prevents the user from opening and closing the nodes
selection-mode	independent or leaf	leaf	Changes the way selection is handled, leaf selects all of the children if clicking on a parent, independent selects a node without triggering any others
color	string	#7e7ec2	Color of the active checkboxes
items	NodeItem	[]	Items used by the tree view, every item must be defined with an id for a value and name for a label, the children property is optional