A Vue3 component that displays JSON in a collapsible tree

by Vue.js Examples

json-tree-view-vue3

A Vue3 component that displays JSON in a collapsible tree. Inspired by vue-json-component and vue-json-tree-view to work with Vue3 and TypeScript.

Example

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

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { JsonTreeView } from "json-tree-view-vue3";

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
    };
  }
});
</script>

Props

Props Required Param Type Default value Description
data false String JSON string to display the tree
rootKey false String "/" Top root-level name
maxDepth false Number 1 The depth of the tree that will be open when rendered
colorScheme false String "light" "light" or "dark" can be used.

Events

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

GitHub

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