vue-json-tree-view

2.0.3 • Public • Published

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.

Installation

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"
Vue.use(TreeView)

Done.

Usage

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

<div>
  <tree-view :data="jsonSource" max-depth="3"></tree-view>
</div>

Props

data

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

options

The defaults are:

{
  maxDepth: 4,
  rootObjectKey: "root"
}
  • 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

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.

Notes

Enjoy.

Changelog

  • 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

Readme

Keywords

Package Sidebar

Install

npm i vue-json-tree-view@2.0.3

Version

2.0.3

License

MIT

Last publish

Collaborators

  • arvidkahl
  • michaelfitzhavey