A Vue 3 JSON viewer component that displays JSON in a collapsible tree.
How to use it:
1. Install and register the JSON viewer.
import { defineComponent, reactive } from "vue"; import { JsonTreeView } from "json-tree-view-vue3";
export default defineComponent({ components: { JsonTreeView } });
2. Render a basic tree from a JSON file.
<template> <JsonTreeView :data="state.json" :maxDepth="3" /> </template>
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 }; } });
3. Available component props.
data: { type: String, required: false, }, rootKey: { type: String, required: false, default: "/", }, maxDepth: { type: Number, required: false, default: 1, }, colorScheme: { type: String, required: false, default: "light", validator: (value: string) => ["light", "dark"].indexOf(value) !== -1, },
4. Fire an event when an item is selected.
- @selected(event: {key: string, value: unknown, path: string})
Preview:
Changelog:
v0.3.1 (09/23/2023)
- Update
Download Details:
Author: seijikohara
Live Demo: https://github.com/seijikohara/json-tree-view-vue3/tree/main/public
Download Link: https://github.com/seijikohara/json-tree-view-vue3/archive/refs/heads/main.zip
Official Website: https://github.com/seijikohara/json-tree-view-vue3
Install & Download: