Treeview

The v-treeview component is useful for displaying large amounts of nested data.

WARNING

This feature requires v3.5.9

Installation

Labs components require a manual import and installation of the component.

import { VTreeview } from 'vuetify/labs/VTreeview'

export default createVuetify({
  components: {
    VTreeview,
  },
})

Usage

A basic example of the treeview component.

API

Component	Description
v-treeview	Primary Component
v-treeview-item	Sub-component used to display a single treeview node
v-treeview-children	Sub-component used to display a single treeview node's children
v-treeview-group	Sub-component used to display a single treeview node's children

Examples

Props

Activatable

Treeview nodes can be activated by clicking on them.

Color

You can control the text and background color of the active treeview node.

Dense mode

Dense mode provides more compact layout with decreased heights of the items.

Item disabled

Setting item-disabled prop allows to control which node's property disables the node when set to true.

Load children

You can dynamically load child data by supplying a Promise callback to the load-children prop. This callback will be executed the first time a user tries to expand an item that has a children property that is an empty array.

Open all

Treeview nodes can be pre-opened on page load.

Selected color

You can control the color of the selected node checkbox.

Selection type

Treeview now supports two different selection types. The default type is 'leaf', which will only include leaf nodes in the v-model array, but will render parent nodes as either partially or fully selected. The alternative mode is 'independent', which allows one to select parent nodes, but each node is independent of its parent and children.

Slots

Append and label

Using the the label, and an append slots we are able to create an intuitive file explorer.

Misc

Search and filter

Easily filter your treeview by using the search prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the filter prop. This works similar to the v-autocomplete component.

Selectable icons

Customize the on, off and indeterminate icons for your selectable tree. Combine with other advanced functionality like API loaded items.