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 Feb 20 2022
1. Tree Chart Component For Vue.js 2+
A Vue.js 2 component to render a tree chart from JSON data.
2. Liquor Tree Component For Vue.js
A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.
3. Draggable Tree View For Vuetify
A tree view component for Vuetify framework that allows the user to reorder parent & child nodes with drag and drop.
4. Organization Tree Component For Vue.js 2.x
A dynamic, expandable, horizontal/vertical organization tree component for Vue.js 2.x.
5. Vue.js Tree List Component
A vue component for tree structure that supports adding live editing and dragging/sorting.
6. Draggable Nested Tree Component – he-tree-vue
A Vue.js component to render a nested tree view that allows you to resort nodes via drag and drop.
7. Draggable Tree View Component For Vue.js 2
A Vue.js 2 component for creating a draggable tree view where the users are able to re-sort the nodes via drag and drop.
8. Router Tree Component For Vue 3
A router tree component that can be used to represents the routes or items as a tree view.
9. Customizable Vuejs Tree Viewer
A highly customizable vuejs tree viewer for expanding/collapsing folder tree.
10. Powerful Tree View Component – vue-tree
A simple yet full-featured and highly customizable tree view component for Vue.
Conclusion:
If you’re looking for more Vue.js components for creating tree views on the web app, check out our Tree View section.