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, }
Preview:
Changelog:
03/03/2022
- v2.2.22
Download Details:
Author: chenfengjw163
Live Demo: https://github.com/chenfengjw163/vue-json-viewer/tree/master/example
Download Link: https://github.com/chenfengjw163/vue-json-viewer/archive/refs/heads/master.zip
Official Website: https://github.com/chenfengjw163/vue-json-viewer
Install & Download:
# Vue 2
$ npm i vue-json-viewer@2
# Vue 3
$ npm i vue-json-viewer@3