Display JSON In A Collapsible Tree

A Vue 3 JSON viewer component that displays JSON in a collapsible tree.

How to use it:

1. Install and register the JSON viewer.

import { defineComponent, reactive } from "vue";
import { JsonTreeView } from "json-tree-view-vue3";

export default defineComponent({
  components: { JsonTreeView }
});

2. Render a basic tree from a JSON file.

<template>
  <JsonTreeView :data="state.json" :maxDepth="3" />
</template>

export default defineComponent({
  components: { JsonTreeView },
  setup() {
    const state = reactive({
      json: `{"string":"text","number":123,"boolean":true,"array":["A","B","C"],"object":{"prop1":"value1","nestedObject":{"prop2":"value2"}}}`
    });
    return {
      state
    };
  }
});

3. Available component props.

data: {
  type: String,
  required: false,
},
rootKey: {
  type: String,
  required: false,
  default: "/",
},
maxDepth: {
  type: Number,
  required: false,
  default: 1,
},
colorScheme: {
  type: String,
  required: false,
  default: "light",
  validator: (value: string) => ["light", "dark"].indexOf(value) !== -1,
},

4. Fire an event when an item is selected.

• @selected(event: {key: string, value: unknown, path: string})

Preview:

Changelog:

v0.2.3 (01/26/2023)

• Use correct type for onClick event

v0.2.0 (09/28/2022)

• Update

Download Details:

Author: seijikohara

Live Demo: https://github.com/seijikohara/json-tree-view-vue3/tree/main/public

Download Link: https://github.com/seijikohara/json-tree-view-vue3/archive/refs/heads/main.zip

Official Website: https://github.com/seijikohara/json-tree-view-vue3

Install & Download: