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.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.