10 Best Vue.js Tree View Components For Your App (2024 Update)

Looking for a tree view UI component for your Vue.js based app to present data (e.g. files, JSON, folders, and any other hierarchical data) in a logical manner?

This is a list of 10 best Vue.js tree components that help developers quickly and easily render hierarchical data in a nested tree structure. Have fun.

Originally published Nov 17 2017,  updated Jan 08 2024

1. Nested Tree View Component For Vue 3

Nested Tree View Component For Vue 3

Demo Download

A checkable, searchable, and nested tree view component based on Vue 3 Composition API.


2. Draggable Nested Tree Component For Vue

Draggable Nested Tree Component For Vue

Draggable Nested Tree Component For Vue

Demo Download

A draggable nested tree view component for Vue.js app.


3. Multiple Select Like A Tree – vue3-treeselect

Multiple Select Like A Tree – vue3-treeselect

Demo Download

A multiple select component where you can select nested options in a hierarchical tree structure.


4. Vue.js Tree List Component

Vue.js Tree List Component

Vue.js Tree List Component

Demo Download

A vue component for tree structure that supports adding live editing and dragging/sorting.


5. Powerful Tree View Component – vue-tree

Powerful Tree View Component – vue-tree

Demo Download

A simple yet full-featured and highly customizable tree view component for Vue.


6. Liquor Tree Component For Vue.js

Liquor Tree Component For Vue.js

Liquor Tree Component For Vue.js

Demo Download

A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.


7. Customizable Vuejs Tree Viewer

Customizable Vuejs Tree Viewer

Demo Download

A highly customizable vuejs tree viewer for expanding/collapsing folder tree.


8. Powerful Tree Component For Vue.js 2

Powerful Tree Component For Vue.js 2

Powerful Tree Component For Vue.js 2

Demo Download

A powerful, flexible, highly customizable tree component for Vue.js 2 app.


9. Draggable Nested Tree Component – he-tree-vue

Draggable Nested Tree Component – he-tree-vue

Demo Download

A Vue.js component to render a nested tree view that allows you to resort nodes via drag and drop.


10. Draggable Tree View For Vuetify

Draggable Tree View For Vuetify

Draggable Tree View For Vuetify

Demo Download

A tree view component for Vuetify framework that allows the user to reorder parent & child nodes with drag and drop.


Conclusion:

If you’re looking for more Vue.js components for creating tree views on the web app, check out our Tree View section.

More Resources About Tree View: