JSON Tree View Component For Vue.js

JSON Tree View Component For Vue.js

A Vue.js component for rending a collapsible tree view to present your JSON data.

Vue JSON Tree View

a demonstration

Demo and Blogpost

You can check out the demo on JSFiddle and read the Blogpost called Building a JSON Tree View Component in Vue.js from Scratch in Six Steps that lead to the creation of this library.


Install the plugin with npm:

npm install --save vue-json-tree-view

Then, in your Application JavaScript, add:

import TreeView from "vue-json-tree-view"



Put the tree-view element into your HTML where you want the Tree View to appear.

  <tree-view :data="jsonSource" :options="{maxDepth: 3}"></tree-view>



The JSON to be displayed. Expects a valid JSON object.


The defaults are:

  maxDepth: 4,
  rootObjectKey: "root",
  modifiable: false,
  link: false
  • maxDepth: The maximum number of levels of the JSON Tree that should be expanded by default. Expects an Integer from 0 to Infinity.
  • rootObjectKey: the name of the Root Object, will default to root.
  • modifiable: To modify the json value.
  • link: URL strings will appear as clickable links (unless modifiable="true").


updated json data

If modifiable is true and you want to take the updated json data, you must register event handler as v-on:change-data=.... Only one argument is passed that is updated data - data.

  <tree-view :data="jsonSource" :options="{modifiable: true}" @change-data="onChangeData"></tree-view>

// in your vue code
  methods: {
    onChangeData: function(data) {

Custom Styling

All leaves will have their type indicated as a CSS class, like tree-view-item-value-string. Supported types: String, Number, Function, Boolean and Null Values.

Keys can also be styled. For instance to make labels red:

.tree-view-item-key {
    color: red;




  • 2.0.0: Moved prop based option into options object. Added CSS for leaf types. Support for raw values as data.
  • 1.0.0: Initial Release

Github Repository

Tags: #VueJs