https://github.com/seijikohara/json-tree-view-vue3

JSON tree rendering Vue3 component
https://github.com/seijikohara/json-tree-view-vue3

json typescript vue3 vue3-tree

Last synced: 7 days ago
JSON representation

JSON tree rendering Vue3 component

• Host: GitHub
• URL: https://github.com/seijikohara/json-tree-view-vue3
• Owner: seijikohara
• Created: 2020-10-23T14:54:33.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-06-24T21:53:39.000Z (5 months ago)
• Last Synced: 2024-08-02T16:55:48.477Z (3 months ago)
• Topics: json, typescript, vue3, vue3-tree
• Language: Vue
• Homepage:
• Size: 933 KB
• Stars: 35
• Watchers: 3
• Forks: 11
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# json-tree-view-vue3

[![npm version](https://badge.fury.io/js/json-tree-view-vue3.svg)](https://www.npmjs.com/package/json-tree-view-vue3) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) ![npm bundle size](https://img.shields.io/bundlephobia/min/json-tree-view-vue3.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

A Vue3 component that displays JSON in a collapsible tree.

Inspired by [vue-json-component](https://www.npmjs.com/package/vue-json-component) and [vue-json-tree-view](https://www.npmjs.com/package/vue-json-tree-view) to work with Vue3 and TypeScript.

## Example

```vue

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"}}}`

  

```



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