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

1. vue-treeselect

Multi-select Tree Component For Vue.js 2

Demo Download

A multi-select component with nested options for Vue.js.


2. vue-tree

vue-tree

 Download

The most popular tree and multi-select component for Vue.js 2+ applications.


3. D3.tree

Demo Download

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

vue-org-tree

Demo Download

This is an organization tree component for generating a simple, editable, collapsable organization tree on the Vue.js app.


5. vue-jstree

Interactive Tree View For Vue.js 2

Demo Download

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


6. vue-json-tree-view

Vue JSON Tree View

Demo Download

A JSON tree renderer that rends a collapsible tree view representing your JSON data.


7. vue-drag-tree

vue-drag-tree

Demo Download

A dynamic drag’n’drop tree builder component for Vue.js.


8. liquor-tree

liquor-tree

Demo Download

A flexible, draggable, customizable, mobile-friendly, multi-select tree component.


9. vue-draggable-nested-tree

vue-draggable-nested-tree

Demo Download

Yet another draggable tree view component that supports touch events.


10. vue-treeSelect

Vue.js 2 Tree Select Plugin

Demo Download

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.

You Might Be Interested In: