A Pretty JSON Data Formatter Tree View Component For Vue.js

Vue Json Pretty is a Vuejs component that displays JSON data as a tree structure.

create json object in javascript dynamically, json data example, get value from json object in javascript, display formatted json in html, json stringify pretty


  • as JSON formatted.
  • Get element data from JSON.
  • It is written in TypeScript with static, predictable types.
  • Big data support.

How to make use of it:


$ npm install vue-json-pretty --save

$ yarn add vue-json-pretty

The CSS file is included separately and needs to be imported manually.

    <vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {

Pretty JSON Data Formatter Plugin/Github

See Demo And Download

Official Website(leezng): Click Here

This superior jQuery/javascript plugin is developed by leezng. For extra advanced usage, please go to the official website.