onigetoc / json-tree-view-vue3

JSON tree rendering Vue3 component

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

<script setup lang="ts">
import { JsonTreeView } from "json-tree-view-vue3";

const json = `{"string":"text","number":123,"boolean":true,"array":["A","B","C"],"object":{"prop1":"value1","nestedObject":{"prop2":"value2"}}}`
</script>

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

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}]