Skip to main content

​
Usage

The VTreeview component is used to display hierarchical data with expandable nodes. 
<template>
  <v-treeview
    :items="items"
  />
</template>

<script setup>
const items = [
  {
    title: 'Root',
    value: 'root',
    children: [
      { title: 'Child 1', value: 'child-1' },
      { title: 'Child 2', value: 'child-2' },
    ],
  },
]
</script>

​
Selectable Items

Make items selectable: 
<template>
  <v-treeview
    v-model:selected="selected"
    :items="items"
    selectable
  />
</template>

<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

​
Open All

Expand all nodes by default: 
<template>
  <v-treeview
    :items="items"
    open-all
  />
</template>

​
Search

Filter tree items: 
<template>
  <v-text-field
    v-model="search"
    label="Search"
  />
  
  <v-treeview
    :items="items"
    :search="search"
  />
</template>

<script setup>
import { ref } from 'vue'
const search = ref('')
</script>

​
Indent Lines

Show visual indentation guides: 
<template>
  <v-treeview
    :items="items"
    indent-lines
  />
</template>

​
Custom Icons

Customize expand/collapse icons: 
<template>
  <v-treeview
    :items="items"
    expand-icon="mdi-plus"
    collapse-icon="mdi-minus"
  />
</template>

​
Activatable

Highlight active items: 
<template>
  <v-treeview
    v-model:activated="activated"
    :items="items"
    activatable
  />
</template>

<script setup>
import { ref } from 'vue'
const activated = ref([])
</script>

​
Props

​
items
array
Array of items to display in the tree. Each item should have a title and optionally children
​
modelValue
array
The v-model value (alias for selected)
​
selected
array
Array of selected item values
​
opened
array
Array of opened (expanded) item values
​
activated
array
Array of activated item values
​
openAll
boolean
default:"false"
Opens all tree nodes by default
​
search
string
Search query to filter tree items
​
indentLines
boolean | string
Shows indent guide lines. Use ‘default’ or true for standard lines
​
indentLinesColor
string
Color of the indent guide lines
​
indentLinesOpacity
string | number
Opacity of the indent guide lines
​
hideNoData
boolean
default:"false"
Hides the “no data” message when search returns no results
​
noDataText
string
default:"$vuetify.noDataText"
Text to display when no items match the search
​
expandIcon
IconValue
default:"$treeviewExpand"
Icon used for expandable nodes
​
collapseIcon
IconValue
default:"$treeviewCollapse"
Icon used for collapsible nodes
​
selectable
boolean
default:"false"
Enables item selection with checkboxes
​
activatable
boolean
default:"false"
Enables item activation (highlighting)
​
returnObject
boolean
default:"false"
Returns the entire item object instead of just the value
​
filterKeys
string[]
default:"['title']"
Properties to search when filtering items
​
slim
boolean
default:"true"
Reduces the width of the expand icon area
​
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing of items
​
activeColor
string
Color applied to active items
​
baseColor
string
Base color for items
​
color
string
Color applied to selected items
​
disabled
boolean
Disables all tree items
​
variant
string
Visual variant for tree items

​
Slots

​
title
slot
Slot to customize item title rendering
​
prepend
slot
Slot for content before the item title
​
append
slot
Slot for content after the item title
​
no-data
slot
Slot to customize the “no data” message

​
Events

​
update:modelValue
event
Emitted when selected items change
​
update:selected
event
Emitted when selected items change
​
update:opened
event
Emitted when opened items change
​
update:activated
event
Emitted when activated items change
​
click:open
event
Emitted when an item is opened/closed
​
click:select
event
Emitted when an item is selected/deselected
When using search functionality, the treeview automatically expands parent nodes to show matching children.

Build docs developers (and LLMs) love

Get started for freeTalk to us