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 2020
1. vue-treeselect
A multi-select component with nested options for Vue.js.
2. vue-tree
The most popular tree and multi-select component for Vue.js 2+ applications.
3. D3.tree
A Vue.js component to render a customizable, interactive tree using d3.js.
More Features:
- Tree or Cluster types.
- 3 predefined layouts: Horizontal, Vertical, or Circular.
- Zoomable and resizeable.
- Event handlers.
4. vue-org-tree
This is an organization tree component for generating a simple, editable, collapsable organization tree on the Vue.js app.
5. vue-jstree
An interactive tree structure component for Vue.js 2 app.
6. vue-json-tree-view
A JSON tree renderer that rends a collapsible tree view representing your JSON data.
7. vue-drag-tree
A dynamic drag’n’drop tree builder component for Vue.js.
8. liquor-tree
A flexible, draggable, customizable, mobile-friendly, multi-select tree component.
9. vue-draggable-nested-tree
Yet another draggable tree view component that supports touch events.
10. vue-treeSelect
A hierarchical tree select plugin for Vue2.0+ applications.
Conclusion:
If you’re looking for more Vue.js components for creating tree views on the web app, check out our Tree View section.