BundyUI

Data

TreeItem

Tree

A collapsible, nested tree of selectable items.

html
<UiTree :items="..." />

Items

required

items is the tree data. Each item can nest children, carry an icon, start expanded with defaultExpanded, or opt out with disabled.

app
components
Button.vue
Card.vue
package.json

Model value

modelValue sets which item is selected, two-way bound. A single value unless multiple is set.

app
components
Button.vue
Card.vue
package.json

Selected: none

modelValue is a single value normally, but becomes an array automatically when multiple is set — same pattern as Select.

Default value

defaultValue is the initial selection when uncontrolled.

app
components
Button.vue
Card.vue
package.json

Multiple

multiple lets more than one item be selected, and turns modelValue into an array.

app
components
Button.vue
Card.vue
package.json

Selected: none

Expanded

expanded sets which nodes are open, by key — bind it with v-model:expanded when something outside the tree needs to expand or collapse it.

Expansion state (expanded) and selection state (modelValue) are controlled independently; expanding a node doesn't select it.

Default expanded

Which nodes start open when uncontrolled. Falls back to each item's own defaultExpanded flag when omitted.

app
pages
index.vue
about.vue
package.json

Disabled

disabled freezes the whole tree — nothing selects, nothing expands.

app
components
Button.vue
Card.vue
package.json

Color

color is the selected item's color.

Folder
Item A
Item B
Folder
Item A
Item B
Folder
Item A
Item B
Folder
Item A
Item B
Folder
Item A
Item B
Folder
Item A
Item B
Folder
Item A
Item B
Folder
Item A
Item B

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemsrequired
TreeItem[]
—
The tree data to render; each item can optionally nest its own `children`.
modelValue
string | string[]
—
Controls which item(s) are selected. A single value unless `multiple` is set, in which case it's an array. Omit this to let the tree manage its own selection internally (starting from `defaultValue`); pass it to fully control selection yourself.
defaultValue
string | string[]
—
Initial selection when uncontrolled.
multiple
boolean
false
Allows selecting more than one item at once.
expanded
string[]
—
Controls which items are expanded (by key). Omit this to let the tree manage its own expansion state internally; pass it to fully control it yourself.
defaultExpanded
string[]
—
Initial expanded keys when uncontrolled. Falls back to each item's own `defaultExpanded`.
disabled
boolean
false
Disables the whole tree, preventing selection and expansion.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'

Emits

Event
Payload
Description
update:modelValue
[value: string | string[] | undefined]
—
update:expanded
[value: string[]]
—
select
[item: TreeItem]
—
toggle
[item: TreeItem, expanded: boolean]
—

Types

ts
type TreeColor = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";
ts
interface TreeItem {
    label: string;
    icon?: string;
    children?: TreeItem[];
    value?: string;
    disabled?: boolean;
    defaultExpanded?: boolean;
}
ts
interface TreeContext {
    selectedKeys: ComputedRef<string[]>;
    expandedKeys: ComputedRef<string[]>;
    toggleSelect: (key: string, item: TreeItem) => void;
    toggleExpand: (key: string, item: TreeItem) => void;
    multiple: ComputedRef<boolean>;
    disabled: ComputedRef<boolean>;
    color: ComputedRef<TreeColor>;
}