Simple JSON Viewer For Vue 3 And 2

Install & Download:

# Vue 2
$ npm i vue-json-viewer@2
# Vue 3
$ npm i vue-json-viewer@3

Description:

A simple and user-friendly JSON viewer for Vue 3 and Vue 2. Supports server side rendering.

How to use it:

1. Import and register the JSON viewer.

import JsonViewer from 'vue-json-viewer'

Vue.use(JsonViewer);

2. Add the JsonViewer component to the template and define the JSON data as follows:

<json-viewer :value="jsonData"></json-viewer>

new Vue({
  el: '#app',
  data() {
    return {
      jsonData: {
        total: 15,
        limit: 10,
        skip: 0,
        links: {
          previous: undefined,
          next: function () {},
        },
        data: [
          // data here
        ]
      }
    }
  }
})

3. Available component props.

value: {
  type: [Object, Array, String, Number, Boolean, Function],
  required: true
},
expanded: {
  type: Boolean,
  default: false
},
expandDepth: {
  type: Number,
  default: 1
},
copyable: {
  type: [Boolean, Object],
  default: false
},
sort: {
  type: Boolean,
  default: false
},
boxed: {
  type: Boolean,
  default: false
},
theme: {
  type: String,
  default: 'jv-light'
},
timeformat: {
  type: Function,
  default: value => value.toLocaleString(),
},
previewMode: {
  type: Boolean,
  default: false,
},
showArrayIndex: {
  type: Boolean,
  default: true,
}