/json-tree-view-vue3

JSON tree rendering Vue3 component

Primary LanguageVue

json-tree-view-vue3

npm version TypeScript npm bundle size License: MIT code style: prettier

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>
image

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