repository·dev·Indexed 23 days ago
https://github.com/leezng/vue-json-prettyA JSON tree view component for Vue that renders JSON data as an interactive, expandable structure. It supports data selection, editing, searching, filtering, and virtual scrolling for large datasets. The library provides support for Vue 3 (latest) and Vue 2 (v1-latest), and includes integration guides for Nuxt.js.
To use the latest version of vue-json-pretty (which supports Vue 3), install it using your preferred package manager.
If you are using Vue 2, you must install the v1-latest version specifically.
# For Vue 3 (latest)
$ npm install vue-json-pretty --save
$ yarn add vue-json-pretty
# For Vue 2
$ npm install vue-json-pretty@v1-latest --saveTo use vue-json-pretty in a Nuxt.js project, follow these two steps:
plugins/vue-json-pretty.js) to register the component globally.nuxt.config.js.// 1. In plugins/vue-json-pretty.js
import Vue from 'vue'
import VueJsonPretty from 'vue-json-pretty'
Vue.component("vue-json-pretty", VueJsonPretty)
// 2. In nuxt.config.js
{
css: [
'vue-json-pretty/lib/styles.css'
],
plugins: [
'@/plugins/vue-json-pretty'
]
}To enable selection capabilities (checkboxes/selection logic), configure the following props:
selectableType: Set to 'single', 'multiple', or '' (default is empty).showSelectController: Set to true to display the selection UI (checkboxes).nodeSelectable: A function (node: NodeDataType) => boolean to determine if a specific node can be selected.selectOnClickNode: If true, clicking the node triggers selection.highlightSelectedNode: If true, the selected node is visually highlighted.Note: Selection is automatically disabled for objectEnd and arrayEnd node types.
To use vue-json-pretty, you must manually import both the component and its CSS file. The component accepts a :data prop which should contain the JSON object you wish to render as a tree structure.
<template>
<div>
<vue-json-pretty :data="{ key: 'value' }" />
</div>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
export default {
components: {
VueJsonPretty,
},
};
</script>If you have a reference to the component instance (via ref), you can programmatically control search navigation and retrieve search metadata using these methods:
nextMatch(): Navigates to the next search match.prevMatch(): Navigates to the previous search match.getSearchResultInfo(): Returns the current search state as { currentIndex, totalCount }.treeNodePropsPass object defines the configuration options available to the vue-json-pretty component. These props control the visual rendering, interactivity, and data handling of the JSON tree. Use these to customize how keys, values, and actions are displayed.The Tree component accepts a wide range of props to control rendering, search, selection, and performance.
search: The search keyword for filtering the JSON tree.searchCaseSensitive: Whether the search is case-sensitive.searchMode: The scope of the search: 'key', 'value', or 'all'.searchStrict: If true, uses exact matching; if false, uses fuzzy (includes) matching.virtual: Enables virtual scrolling.height: The height of the tree container when using virtual scroll.itemHeight: The height of each row (default 20).dynamicHeight: Enables dynamic row heights for virtual scroll (default true).selectedValue: The currently selected path(s). For multiple selection, use an array ['root.a', 'root.b']; for single, use a string 'root.a'.selectableType: Controls selection behavior (e.g., 'single', 'multiple').collapsedOnClickBrackets: Whether clicking brackets toggles collapse state.deep: Defines the depth of the tree; nodes deeper than this will not be expanded by default.collapsedNodeLength: Defines the maximum length of a node before it is collapsed.The component emits several events to allow interaction with the JSON tree:
| Event Name | Description | Parameters |
|---|---|---|
nodeClick | Triggers when a node is clicked | (node: NodeData) |
nodeMouseover | Triggers when a node is hovered | (node: NodeData) |
bracketsClick | Triggers when brackets are clicked | (collapsed: boolean, node: NodeData) |
iconClick | Triggers when the icon is clicked | (collapsed: boolean, node: NodeData) |
selectedChange | Triggers when the selected value changes | (newVal, oldVal) |
searchMatchChange | Triggers when search results change or navigation occurs | ({ currentIndex, totalCount }) |
The vue-json-pretty component accepts several props to control data rendering, selection behavior, and visual styling.
Key Data Props:
data (v-model): The source data object. Note: This must be a JSON object, not a JSON string.selectedValue (v-model): Two-way binding for the selected data path (supports string or array).rootPath: Defines the top-level data path (default: 'root').indent: Indentation level (default: 2).deep: Maximum depth before nodes are collapsed (default: Infinity).collapsedNodeLength: Threshold for objects or arrays to be collapsed (default: Infinity).showLength: If true, displays the length when data is collapsed.Selection & Interaction Props:
selectableType: Defines selection mode: 'multiple' or 'single' (default: none).nodeSelectable: A function (node) => boolean to define which nodes can be selected.showSelectController: Displays the selection controller.selectOnClickNode: Triggers selection when a node is clicked (default: true).highlightSelectedNode: Highlights the currently selected node (default: true).collapsedOnClickBrackets: Allows collapsing/expanding by clicking brackets (default: true).Visual & Theme Props:
theme: Set to 'light' or 'dark' (default: 'light').showLine: Displays identification lines (default: true).showLineNumber: Displays line numbers (default: false).showIcon: Displays icons (default: false).showDoubleQuotes: Displays double quotes for keys (default: true).Virtual Scrolling (for large datasets):
virtual: Enables virtual scrolling (default: false).height: Total height required when using virtual scrolling (default: 400).itemHeight: Height of each node (can be an estimate) (default: 20).dynamicHeight: Enables dynamic height for each row when using virtual scrolling (default: true).Editing & Custom Rendering:
editable: Enables editing mode (default: false).editableTrigger: The trigger for editing: 'click' or 'dblclick' (default: 'click').renderNodeKey: Custom renderer for node keys.renderNodeValue: Custom renderer for node values.renderNodeActions: Custom renderer for node actions.You can override the default rendering of keys, values, or actions using the following slots:
renderNodeKey: Customize how the node key is rendered. Receives { node, defaultKey }.renderNodeValue: Customize how the node value is rendered. Receives { node, defaultValue }.renderNodeActions: Customize node actions. Receives { node, defaultActions } (can also be controlled via the renderNodeActions prop).The vue-json-pretty component is highly configurable via props. Key categories of configuration include:
data(v-model): The JSON object to display. Supports v-model when editable is enabled.editable: Enables support for editing JSON values.editableTrigger: Defines the trigger for editing (click or dblclick). Default is click.indent: Number of spaces for JSON indentation. Default is 2.showLine: Shows the line. Default is true.showLineNumber: Shows line numbers. Default is false.showIcon: Shows the collapse/expand icon. Default is false.showDoubleQuotes: Shows double quotes on keys. Default is true.theme: Sets the theme to 'light' or 'dark'. Default is 'light'.collapsedNodeLength: Threshold for collapsing objects or arrays based on length.deep: Threshold for collapsing nodes based on depth.showLength: Shows the length of the collection when collapsed.collapsedOnClickBrackets: Allows clicking brackets to collapse/expand nodes. Default is true.For large datasets, use virtual scrolling to improve performance:
virtual: Enables virtual scroll. Default is false.height: The height of the list when using virtual scroll. Default is 400.itemHeight: Fixed row height for virtual scroll. Default is 20.dynamicHeight: Enables measured dynamic row heights. Default is true.selectedValue(v-model): The selected data path (string or array).selectableType: Selection mode: 'multiple' or 'single'. Default is none.search: Keyword for filtering the tree. Only matching nodes and ancestors are shown.searchMode: Scope of search: 'key', 'value', or 'all'. Default is 'all'.searchStrict: If false, uses fuzzy matching; if true, uses exact matching.virtual mode. This requires setting a height for the container. If dynamicHeight is enabled (default), the component will automatically measure row heights.