Skip to content

Vue component that renders JSON data in a collapsible tree structure.

License

Notifications You must be signed in to change notification settings

amoncaldas/vue-json-tree

 
 

Repository files navigation

vue-json-tree

CircleCI NPM License

Vue component that renders JSON data in a collapsible tree structure.

usage

use in browsers

  • Include the CSS and JS along with Vue, so you get a <json-tree> component.
<link href="https://unpkg.com/vue-json-tree@0.3.3/dist/json-tree.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-json-tree@0.3.3/dist/json-tree.js"></script>
  • Instantiate the component with your data.
<div id="app"></div>
<script>
  new Vue({
    template: '<json-tree :raw="sample"></json-tree>',
    el: '#app',
    data: {
      sample: '{"foo": "bar"}'
    }
  })
</script>

use with webpack and vue-loader

  • Install the vue-json-tree package via NPM.
npm install --save vue-json-tree
  • Import the SFC (with CSS embedded) and register it as a component, either globally or in another component.
import JsonTree from 'vue-json-tree'
Vue.component('json-tree', JsonTree)

props

raw (string, optional)

The data you want to present in the tree view. Must be a valid JSON string, otherwise it fails.

data (any, optional)

If your JSON data has already been parsed, bind this one instead. Must be something that can be produced by JSON.parse().

level (number, optional)

Sometimes the data structure is very deep. You could set them to collapsed on load. By default all levels are expanded.

demo

https://myst729.github.io/vue-json-tree

development

Want to fix bugs or implement new features?

# Grab the source code from GitHub
git clone git@github.com:myst729/vue-json-tree.git

# Install dependencies via NPM
npm install

# Run in dev mode and start to hack
npm run dev

# Make sure you run the tests
npm run test

# Build the dist files
npm run dist

MIT © Leo Deng

About

Vue component that renders JSON data in a collapsible tree structure.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 70.5%
  • Vue 21.2%
  • CSS 8.3%