English | 简体中文

Features

• As a JSON Formatter.
• Support get item data from JSON.
• Support big data.
• Support editable.

Environment Support

• Modern browsers, Electron and Internet Explorer 11 (with polyfills)
• Server-side Rendering

| IE / Edge | Firefox | Chrome | Safari | Electron | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 2 versions |

Using NPM or Yarn

$ npm install vue-json-pretty@v1-latest --save

$ yarn add vue-json-pretty@v1-latest

Use Vue3

$ npm install vue-json-pretty --save

Usage

The CSS file is included separately and needs to be imported manually. You can either import CSS globally in your app (if supported by your framework) or directly from the component.

<template>
  <div>
    <vue-json-pretty :data="{ key: 'value' }" />
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
};
</script>

Use Nuxt.js

1. In plugins/vue-json-pretty.js

import Vue from 'vue'
import VueJsonPretty from 'vue-json-pretty'

Vue.component("vue-json-pretty", VueJsonPretty)

2. In nuxt.config.js

css: [
  'vue-json-pretty/lib/styles.css'
],
plugins: [
  '@/plugins/vue-json-pretty'
],

Props

| Property | Description | Type | Default | | ------------------------ | ----------------------------------------------- | -------------------- | ------- | | data(v-model) | JSON data, support v-model when use editable | JSON object | - | | deep | Paths greater than this depth will be collapsed | number | - | | showLength | Show the length when collapsed | boolean | false | | showLine | Show the line | boolean | true | | showLineNumber | Show the line number | boolean | false | | showIcon | Show the icon | boolean | false | | showDoubleQuotes | Show doublequotes on key | boolean | true | | virtual | Use virtual scroll | boolean | false | | height | The height of list when using virtual | number | 400 | | itemHeight | The height of node when using virtual | number | 20 | | selectedValue.sync | Selected data path | string, array | - | | rootPath | Root data path | string | root | | nodeSelectable | Defines whether a data path supports selection | function(node) | - | | selectableType | Support path select, default none | multiple, single | - | | showSelectController | Show the select controller | boolean | false | | selectOnClickNode | Trigger select when click node | boolean | true | | highlightSelectedNode | Support highlighting selected nodes | boolean | true | | collapsedOnClickBrackets | Support click brackets to collapse | boolean | true | | editable | Support editable | boolean | false | | editableTrigger | Trigger | click, dblclick | click |

Events

| Event Name | Description | Parameters | | --------------- | ---------------------------------------- | -------------------- | | node-click | triggers when click node | (node: NodeData) | | brackets-click | triggers when click brackets | (collapsed: boolean) | | icon-click | triggers when click icon | (collapsed: boolean) | | selected-change | triggers when the selected value changed | (newVal, oldVal) |

Slots

| Slot Name | Description | Parameters | | --------- | ----------------- | ---------------------- | | nodeKey | render node key | { node, defaultKey } | | nodeValue | render node value | { node, defaultValue } |

Contributors