Component for rendering a tree view of JSON

by Vue.js Examples

Vue JSON Component

A collapsable tree view for JSON. This package is loosely based on vue-json-tree-view with a series of upgrades. I'm not contributing this back to that package because it would require breaking API changes, and there are some features I'm not planning on adding unless people need them. Contributions welcome!

View demo Download Source

Philosophy

This package has two major improvements over predecessors: builds and customization. For builds, this package ships CommonJS, Module, and Minified builds with limited external dependencies. vue-json-tree-view bundles in lots of dependencies. I also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is also only two files with most of the functions being helpers for custom styles.

The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.

Usage

Install

npm i vue-json-component
yarn add vue-json-component

Import Locally

import { JSONView } from "vue-json-component";
export default Vue.extend({
  components: { "json-view": JSONView }
});

Import Globally

import JSONView from "vue-json-component";
Vue.use(JSONView)

Use

<template>
  <json-view :data="data" />
</template>

Customize

The font size and font family are inherited from the page.

Props

  • data (JSON): The valid JSON object you want rendered as a tree.
  • rootKey (String): The name of the top level root key; defaults to root.
  • maxDepth (Number): Depth of the tree that is open at first render; defaults to 1.
  • styles (Object): Override the color styles. Defaults shown below.
const defaultStyles = {
  key: "#002b36",
  valueKey: "#073642",
  string: "#268bd2",
  number: "#2aa198",
  boolean: "#cb4b16",
  null: "#6c71c4",
  arrowSize: "6px"
};

Example

<template>
  <json-view
    :data="data"
    rootKey="view"
    :maxDepth="1"
    :styles="{ key: '#0977e6' }"
  />
</template>

Development

Install

yarn

Hot-Reload Hostapp

yarn serve

Build Component

yarn build

Lints and fixes files

yarn lint

GitHub