ITree ​

A nested list that can be expanded and collapsed — a file browser, a category hierarchy, an org chart.

<script setup lang="ts">
const selected = ref<string[]>([])
const expanded = ref(['src', 'components'])

const files = [
  {
    label: 'src',
    icon: FolderIcon,
    children: [
      { label: 'components', icon: FolderIcon, children: [{ label: 'Button.vue', icon: FileIcon }] },
      { label: 'index.ts', icon: FileIcon },
    ],
  },
  { label: 'README.md', icon: FileIcon },
]
</script>

<template>
  <ITree
    v-model="selected"
    v-model:expanded="expanded"
    :items="files"
    aria-label="Project files"
  />
</template>

Values, not objects ​

Both models are arrays of values: v-model holds what is selected, v-model:expanded holds what is open. A node's value identifies it, falling back to its label — so both models survive a round trip through a URL, a store or a request body.

const items = [
  { label: 'src', value: 'src-dir', children: srcChildren },
  { label: 'README.md' }, //  value is "README.md"
]

Multiple selection ​

multiple lets several nodes be selected. Add propagate-select and choosing a folder chooses everything beneath it.

<ITree
  v-model="checked"
  :items="files"
  :expanded="['src']"
  multiple
  propagate-select
  aria-label="Files to export"
/>

Counts ​

A node's count sits against the row's trailing edge, so the numbers line up in a column rather than stepping inward with each level.

<ITree
  :expanded="['src']"
  aria-label="Files by folder"
  :items="[
    {
      label: 'src',
      icon: FolderIcon,
      count: 24,
      children: [
        { label: 'components', icon: FolderIcon, count: 18 },
        { label: 'composables', icon: FolderIcon, count: 6 },
        { label: 'index.ts', icon: FileIcon },
      ],
    },
    { label: 'docs', icon: FolderIcon, count: 9 },
    { label: 'archive', icon: FolderIcon, count: 0 },
  ]"
/>

A count of 0 still renders.

Indentation ​

Depth is padding on the row rather than a nested container, so hover and selection backgrounds span the full width at every level.

indent sets how many pixels each level adds, on top of a small fixed inset.

<ITree :items="files" :indent="24" />

Props ​

TreeItemOption ​

Events ​

Slots ​

Accessibility ​

Arrow keys move across the whole tree whatever the nesting: up and down walk the visible rows, right opens a branch, left closes it, and typing jumps to a matching label. A leaf reserves the same space a chevron takes, so the labels stay in one column.

Give the tree a name with ariaLabel.