A flexible, recursive tree-view component — checkboxes, drag & drop, lazy loading, slots and more. Every example below is live and editable.
npm i vue3-tree-vueWhat to look for
Click any folder to expand or collapse it. Notice that the Movies node renders two custom icons (🎬🍿) through the item-prepend-icon slot, while every other node falls back to its own single icon — the same slot can give one node bespoke content.
Set isCheckable to get checkboxes. Checking a parent cascades to its children, and partially-checked parents render an indeterminate (tri-state) box.
Drag a file onto a folder to move it. The async dropValidator callback decides which drops are allowed.
What to look for
Drag a file onto a folder to re-parent it — the async dropValidator(dropped, host) runs first and must resolve true for the move to happen. The Operating System Files (Read-only) folder is fully locked:
false for read-only folders,disableDragAndDrop: true, anddisableDragAndDrop: true too.Watch the event console to see each move — and each refusal.
Right-click any file to fire the onContextMenu event and drive your own menu — payload is { item, event }.
Ready to build your own? Head to Getting Started or browse the API reference.