10 Best Vue.js Tree View Components For Your App (2022 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 Feb 20 2022

1. Tree Chart Component For Vue.js 2+

Tree Chart Component For Vue.js 2+

Demo Download

A Vue.js 2 component to render a tree chart from JSON data.


2. 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.


3. Draggable Tree View For Vuetify

Liquor Tree Component For Vue.js

Demo Download

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

Organization Tree Component For Vue.js 2.x

Demo Download

A dynamic, expandable, horizontal/vertical organization tree component for Vue.js 2.x.


5. 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.


6. 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.


7. Draggable Tree View Component For Vue.js 2

Draggable Tree View Component For Vue.js 2

Demo Download

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

Router Tree Component For Vue 3

Demo Download

A router tree component that can be used to represents the routes or items as a tree view.


9. Customizable Vuejs Tree Viewer

Customizable Vuejs Tree Viewer

Demo Download

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


10. 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.


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: