Json-tree-view-vue3 NPM

json-tree-view-vue3

npm bundle size

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";
import 'json-tree-view-vue3/dist/style.css'

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

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

Props

Props	Required	Param Type	Default value	Description
json	true	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.