Display JSON In A Collapsible Tree

Install & Download:

Description:

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.