A Simple vue3 project for rendering items in a tree.

npm i vue3-tree-vue

Handling Selected Items:

<template>    
    <!-- Default makes items selectable (one at a time) -->
    <vue3-tree-vue :items="items" 
                   :isCheckable="false"
                   :hideGuideLines="false"
                   v-model:selectedItem="selectedItem">
      <!-- Applying some simple styling to tree-items -->
       <template v-slot:item-prepend-icon="treeViewItem" >
              <img src="./assets/folder.svg"
                   alt="folder"
                   v-if="treeViewItem.type === 'folder'"
                   height="20" width="20" />
       </template>
    </vue3-tree-vue>
</template>

image

Handling Checked Items

  setup() {
    const selectedItems = ref<TreeViewItem[]>([]);
    const items = ref<TreeViewItem[]>([]); // define your tree items here.
    
    return {
      selectedItems,
      items
    }
  }

<template>
    <vue3-tree-vue :items="items" 
                   :isCheckable="true"
                   :hideGuideLines="false"
                   v-model:checkedItems="selectedItems"/>
</template>

image

Properties

Property Default Description
items Empty array An array of TreeViewItem.
hideGuideLines false Determines the visibility of the guidelines
selectedItem undefined Defines the item that is selected on the tree
checkedItems An empty array Defines the items that are checked on the tree
isCheckable false Defines if items can be selected (one at a time) or selected (using a checkbox)

Styles

Class Description
selected-tree-item Defines the style for the selectedItem

GitHub

View Github