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

1. Interactive Tree View For Vue.js 2 – VJstree

Multi-select Tree Component For Vue.js 2

Demo Download

An interactive tree structure component for Vue.js 2 app.


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


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


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


6. Treeview Component For Vue.js 2 – v-treeview

Treeview Component For Vue.js 2 – v-treeview

Demo Download

A treeview component for Vue.js 2 that supports customizable context menu and tree types, configurable font awesome icon, depth control.


7. Vue Folder Tree Component

Vue Folder Tree Component

Demo Download

A Vue treeview component used for rendering a dynamic, collapsible folder tree.


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


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


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


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:

You Might Be Interested In: