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";
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. |

Events

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