VTreeview API

Props

name	type	default
`activatable`	boolean	false
Allows user to mark a node as active by clicking on it.
`activated`	unknown	undefined
Array of ids of activated nodes.
`active-class`	string	undefined
The class applied to the component when it is in an active state.
`active-color`	string	undefined
Deprecated, use `color` instead.
`active-strategy`	\| 'single-leaf' \| 'leaf' \| 'independent' \| 'single-independent' \| ActiveStrategy \| ((mandatory: boolean) => ActiveStrategy)	undefined
Affects how items with children behave when activated. If not specified, the single-independent strategy will be used. leaf: Only leaf nodes (items without children) can be activated. single-leaf: Similar as leaf, but only a single item can be activated at a time. independent: All nodes can be activated whether they have children or not. single-independent: Similar as independent, but only a single item can be activated at a time.
`base-color`	string	undefined
Sets the color of component when not focused.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`collapse-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$treeviewCollapse'
Icon to display when the list item is expanded.
`color`	string	undefined
Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`custom-filter`	FilterFunction	undefined
Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.
`custom-key-filter`	unknown	undefined
Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Disables selection for all nodes.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`expand-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$treeviewExpand'
Icon used to indicate that a node can be expanded.
`false-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
The icon used when inactive.
`filterable`	boolean	false
FOR INTERNAL USE ONLY Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox.
`filter-keys`	string \| string[]	['title']
Array of specific keys to filter on the item.
`filter-mode`	'every' \| 'some' \| 'union' \| 'intersection'	'intersection'
Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`. some: There is at least one match from either the custom filter or the custom key filter. every: All columns match either the custom filter or the custom key filter. union: There is at least one match from the custom filter, or all columns match the custom key filters. intersection: There is at least one match from the custom filter, and all columns match the custom key filters.
`fluid`	boolean	false
Removes indentation from nested items.
`height`	string \| number	undefined
Sets the height for the component.
`hide-actions` New in v3.9.0	boolean	false
Hide the expand icon and loading indicator next to each item title.
`hide-no-data` New in v3.10.0	boolean	false
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.
`indent`	string \| number	undefined
Overrides the indent size for nested groups.
`indent-lines` New in v3.9.0	boolean \| 'default' \| 'simple'	false
Controls visibility and variant of the indent lines.
`indent-lines-color` New in v3.12.0	string	undefined
Sets color of indent lines
`indent-lines-opacity` New in v3.12.0	string \| number	undefined
Sets opacity of indent lines
`indeterminate-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$checkboxIndeterminate'
Icon used when node is in an indeterminate state. Only visible when `selectable` is `true`.
`item-children`	SelectItemKey	'children'
Property on supplied `items` that contains its children.
`item-props`	SelectItemKey	'props'
Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component.
`items`	unknown[]	[]
An array of items used to build the treeview.
`items-registration` New in v3.11.0	'props' \| 'render'	'render'
When set to ‘props’, skips rendering collapsed items/nodes (for significant performance gains).
`item-title`	SelectItemKey	'title'
Property on supplied `items` that contains its title.
`item-type`	SelectItemKey	'type'
Designates the key on the supplied items that is used for determining the nodes type.
`item-value`	SelectItemKey	'value'
Property on supplied `items` that contains its value.
`lines`	false \| 'one' \| 'two' \| 'three'	'one'
Designates a minimum-height for all children `v-list-item` components. This prop uses line-clamp and is not supported in all browsers.
`load-children`	(item: unknown) => Promise<void>	undefined
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.
`loading-icon`	string	'$loading'
Icon used when node is in a loading state.
`mandatory`	boolean	false
Forces at least one item to always be selected (if available).
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	unknown	undefined
Allows one to control which nodes are selected. The array contains the values of currently selected items. It is equivalent to the `v-model:selected`
`navigation-index`	number	undefined
Specifies the currently selected navigation index when using `navigationStrategy="track"`. Can be used with `v-model:navigationIndex` for two-way binding. Items at this index receive visual keyboard focus styling and automatic scrolling. Note: Only works with the `items` prop, not with slotted items.
`navigation-strategy`	'focus' \| 'track'	'focus'
Determines keyboard navigation behavior. focus (default) moves DOM focus to items, suitable for traditional lists. track provides visual keyboard focus without moving DOM focus, ideal for command palettes and autocomplete where an external element retains focus. When track mode is active, items automatically receive `tabindex="-1"`, proper `aria-activedescendant` is set on the list container, and keyboard-focused items display focus-visible styling with auto-scrolling.
`no-data-text` New in v3.10.0	string	'$vuetify.noDataText'
Text shown when no items are provided to the component.
`no-filter`	boolean	false
Disables all item filtering.
`open-all`	boolean	false
When `true` will cause all branch nodes to be opened when component is mounted.
`opened`	unknown	undefined
An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.
`open-on-click`	boolean	undefined
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.
`prepend-gap`	string \| number	undefined
Sets the horizontal spacing between prepend slot and the main content within list item. Also affects indent to ensure expected alignment of group children.
`return-object`	boolean	false
When `true` will make `v-model`, `v-model:selected,` v-model:activated`and`v-model:opened` return the complete object instead of just the key.
`rounded`	string \| number \| boolean	undefined
Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `shaped` prop.
`search`	string	undefined
The search model for filtering results.
`selectable`	boolean	false
Will render a checkbox next to each node allowing them to be selected. Additionally, the openOnClick property will be applied internally.
`selected`	unknown	undefined
An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.
`selected-color`	string	undefined
The color of the selection checkbox.
`select-strategy`	\| 'single-leaf' \| 'leaf' \| 'independent' \| 'single-independent' \| 'classic' \| 'trunk' \| 'branch' \| SelectStrategy \| ((mandatory: boolean) => SelectStrategy)	'single-leaf'
Affects how items with children behave when selected. leaf: Only leaf nodes (items without children) can be selected. independent: All nodes can be selected whether they have children or not. classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model. trunk: Same as classic but if all of a node’s children are selected then only that node will be added to the model. branch: Same as classic but if any of a node’s children are selected then that node will also be added to the model.
`separate-roots` New in v3.9.0	boolean	false
Applies to `default` variant of `indent-lines`. Prevents showing lines between root-level nodes.
`slim`	boolean	true
Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`true-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
The icon used when active.
`value-comparator`	(a: any, b: any) => boolean	undefined
Apply a custom comparison algorithm to compare model-value and values contains in the items prop.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'text'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:open`	[{ id: unknown; value: boolean; path: unknown[] }]
Emits the item when it is clicked to open.
`click:select`	[{ id: unknown; value: boolean; path: unknown[] }]
Emits the item when it is clicked to select.
`update:activated`	[unknown]
Emits the array of active items when this value changes.
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.
`update:opened`	[unknown]
Emits the array of open items when this value changes.
`update:selected`	[unknown]
Emits the array of selected items when this value changes.

Slots

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
} & {
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
}

never

{ props: { title: string; value: any; [string]: any } }

{
  props: {
    indentLines: ('none' | 'leaf' | 'last-leaf' | 'line' | 'leaf-link')[]
  }
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
  loading: boolean
}

{
  props: { title: string; value: any; [string]: any }
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
  loading: boolean
}

{
  props: { title: string; value: any; [string]: any }
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
}

never

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
} & {
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
}

{ props: { title: string; value: any; [string]: any } }

{ subtitle: string | number | boolean } & {
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
}

{ title: string | number | boolean } & {
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
}

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
} & { props: { onClick: (e: PointerEvent) => void } } & { loading: boolean } & {
  item: unknown
  internalItem: {
    title: string
    props: { title: string; value: any; [string]: any }
    children: ListItem[]
    type: string
    value: any
    raw: unknown
  }
}

`append`
Appends content after label.
`default`
The default Vue slot.
`divider`
Slot for custom divider.
`footer` New in v3.11.0
Slot for footer below expanded children.
`header` New in v3.10.0
Slot for expandable nodes (all items that are not leafs).
`item`
Slot for rendering custom list items. Receives `{ props }` where `props` contains item data (`title`, `subtitle`, `value`, etc.) plus `index` (the item’s position in the list). Use this to completely customize item rendering while still using VList’s navigation and selection features.
`no-data` New in v3.11.0
Defines content for when no items are provided.
`prepend`
Prepends content before label.
`subheader`
Slot for custom subheader.
`subtitle`
Slot for the component’s subtitle content.
`title`
Slot for the component’s title content.
`toggle` New in v3.10.0
Slot for custom expand icon and loading indicator.

SASS Variables

name	default
`$treeview-indent-line-border-radius`	4px
`$treeview-indent-line-color`	rgb(var(--v-theme-on-surface))
`$treeview-indent-line-leaf-link-margin-right`	6px
`$treeview-indent-line-leaf-margin-right`	4px
`$treeview-indent-line-style`	solid
`$treeview-indent-line-width`	1px
`$treeview-indent-line-width-half`	math.round(math.div($treeview-indent-line-width, 2))
`$treeview-indent-lines-gap`	0
`$treeview-indent-lines-opacity`	.4
`$treeview-indent-lines-padding-left`	8px
`$treeview-indent-size`	28px
`$treeview-item-first-icon-margin-start`	-6px
`$treeview-item-spacer-width`	10px

#VTreeview API

VTreeview API