vue-json-pretty

What is vue-json-pretty?

vue-json-pretty is a Vue.js component for rendering JSON data in a pretty, formatted way. It is useful for displaying JSON data in a readable format with syntax highlighting and collapsible nodes.

What are vue-json-pretty's main functionalities?

Pretty JSON Rendering

This feature allows you to render JSON data in a visually appealing format. The component takes a JSON object as a prop and displays it with proper indentation and styling.

<template>
  <vue-json-pretty :data="jsonData" />
</template>

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

export default {
  components: { VueJsonPretty },
  data() {
    return {
      jsonData: {
        name: "John Doe",
        age: 30,
        city: "New York"
      }
    };
  }
};
</script>

Collapsible Nodes

This feature allows you to collapse and expand nodes in the JSON structure. By setting the 'deep' prop, you can control the initial depth of expanded nodes, making it easier to navigate large JSON objects.

<template>
  <vue-json-pretty :data="jsonData" :deep="1" />
</template>

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

export default {
  components: { VueJsonPretty },
  data() {
    return {
      jsonData: {
        name: "John Doe",
        details: {
          age: 30,
          city: "New York"
        }
      }
    };
  }
};
</script>

Other packages similar to vue-json-pretty

react-json-view

react-json-view is a React component for displaying JSON data in a similar pretty format with collapsible nodes. It offers more interactivity, such as editing JSON data directly in the view, which vue-json-pretty does not support.

jsoneditor

jsoneditor is a web-based tool that provides a tree view and code editor for JSON data. It is more feature-rich compared to vue-json-pretty, offering editing capabilities, search, and validation, but it is not specifically designed for Vue.js.

json-formatter-js

json-formatter-js is a standalone JavaScript library for rendering JSON in a collapsible tree format. It is framework-agnostic and can be used with any JavaScript project, whereas vue-json-pretty is specifically for Vue.js applications.

README

Vue Json Pretty

A Vue component for rendering JSON data as a tree structure.

Use Vue2, see 1.x.

Use Vue3, see master.

English | 简体中文

Features

• As a JSON Formatter.
• Get item data from JSON.
• Support big data.

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 --save

$ yarn add vue-json-pretty

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 :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
  </div>
</template>

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

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

Use Nuxt.js

• In plugins/vue-json-pretty.js

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

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

• In nuxt.config.js

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

Props

• If you are using only the normal features (JSON pretty), just focus on the base properties.
• If you are using higher features (Get data), you can use base and higher attributes.

Attribute	Level	Description	Type	Default
data	normal	JSON data	JSON object	-
deep	normal	Data depth, data larger than this depth will not be expanded	number	Infinity
deepCollapseChildren	normal	Whether children collapsed by deep prop should also be collapsed	boolean	false
showLength	normal	Whether to show the length when closed	boolean	false
showLine	normal	Whether to show the line	boolean	true
showDoubleQuotes	normal	Whether to show doublequotes on key	boolean	true
virtual	normal	Whether to use virtual scrolling, usually used for big data	boolean	false
itemHeight	normal	The height of each item when using virtual scrolling	number	auto
virtualLines	normal	The number of lines to render when virtual scrolling is enabled	number	10
v-model	higher	Defines value when the tree can be selected	string, array	-
path	higher	Root data path	string	root
pathSelectable	higher	Defines whether a data path supports selection	function(path, content)	-
selectableType	higher	Defines the selected type, this feature is not supported by default	multiple, single	-
showSelectController	higher	Whether to show the select controller at left	boolean	false
selectOnClickNode	higher	Whether to change selected value when click node	boolean	true
highlightSelectedNode	higher	Highlight current node when selected	boolean	true
collapsedOnClickBrackets	higher	Collapsed control	boolean	true
customValueFormatter	higher	A function that can return different html or strings to display for values in the data.	function(data, key, path, defaultFormatResult)	-

Events

Event Name	Description	Callback Parameters
click	triggered when a data item is clicked	(path, data)
change	triggered when the selected value changed (only the selectableType not null)	(newVal, oldVal)

Major Contributors