Treeview

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

Usage

A basic example

API

v-treeview
Name
activatable
Default
false
Type
boolean

Allows user to mark a node as active by clicking on it

Name
active
Default
[]
Type
array

Syncable prop that allows one to control which nodes are active. The array consists of the item-key of each active item.

Name
active-class
Default
'v-treeview-node--active'
Type
string

The class applied to the node when active

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
expand-icon
Default
'$vuetify.icons.subgroup'
Type
string

Icon used to indicate that a node can be expanded

Name
filter New in — v1.5
Default
null
Type
function

Custom item filtering function. By default it will use case-insensitive search in item's label.

Name
hoverable
Default
false
Type
boolean

Applies a hover class when mousing over nodes

Name
indeterminate-icon
Default
'$vuetify.icons.checkboxIndeterminate'
Type
string

Icon used when node is in an indeterminate state

Name
item-children
Default
'children'
Type
string

Property on supplied items that contains its children

Name
item-key
Default
'id'
Type
string

Property on supplied items used to keep track of node state. The value of this property has to be unique among all items.

Name
item-text
Default
'name'
Type
string

Property on supplied items that contains its label text

Name
items
Default
[]
Type
array

An array of items used to build the treeview

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
load-children
Default
null
Type
function

A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a item-children property that is an empty array. Supports returning a Promise.

Name
loading-icon
Default
'$vuetify.icons.loading'
Type
string

Icon used when node is in a loading state

Name
multiple-active
Default
false
Type
boolean

When true, allows user to have multiple active nodes at the same time

Name
off-icon
Default
'$vuetify.icons.checkboxOff'
Type
string

Icon used when node is not selected

Name
on-icon
Default
'$vuetify.icons.checkboxOn'
Type
string

Icon used when leaf node is selected or when a branch node is fully selected

Name
open
Default
[]
Type
array

Syncable prop that allows one to control which nodes are open. The array consists of the item-key of each open item.

Name
open-all
Default
false
Type
boolean

When true will cause all branch nodes to be opened when component is mounted

Name
open-on-click
Default
false
Type
boolean

When true will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with activatable you will be unable to mark nodes with children as active.

Name
return-object
Default
false
Type
boolean

When true will make v-model, active.sync and open.sync return the complete object instead of just the key

Name
search New in — v1.5
Default
undefined
Type
string

The search model for filtering results

Name
selectable
Default
false
Type
boolean

Will render a checkbox next to each node allowing them to be selected

Name
selected-color
Default
'accent'
Type
string

The color of the selection checkbox

Name
transition
Default
false
Type
boolean

Applies a transition when nodes are opened and closed

Name
value
Default
[]
Type
array

Allows one to control which nodes are selected. The array consists of the item-key of each selected item. Is used with @input event to allow for v-model binding.

Examples

Searching a directory

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.

Scoped slots

Using scoped slots we are able to create an intuitive file explorer. Apart from the prepend slot, there is also one for the label, and an append slot.

Async items

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.

Custom selectable icons

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore