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"
Vue.use(TreeView)
Done.
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>
The JSON to be displayed. Expects a valid JSON object.
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
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.
Enjoy.
- 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