A Vue component to visualize JS objects as an interactive tree.
Forked from soc221b/object-visualizer:
- adds support for rendering Date objects (as ISO strings)
- ESM-only build
- improved rendering of empty arrays (as
[]) and empty objects (as{}) - improved colors for booleans
- Customizable Keys: Use
getKeysto control which keys are displayed for nested objects. - Auto-Expansion: Use
expandOnCreatedAndUpdatedto determine which nodes should be expanded by default. - Recursive Expansion:
Meta+Clickon an expander to recursively expand all child nodes. - Recursive Collapse:
Meta+Shift+Clickon an expander to recursively collapse all child nodes. - Dark Mode Support: Automatically adapts to light/dark mode based on
prefers-color-scheme.
| Prop | Type | Default | Description |
|---|---|---|---|
data |
unknown |
Required | The data to visualize (object, array, primitive, etc.). |
rootName |
string |
'' |
The name displayed for the root node. |
expandOnCreatedAndUpdated |
(path: Path) => boolean |
() => false |
Function to determine initial expansion state. Receives the path of the node. |
getKeys |
(object: any, path: Path) => string[] |
Object.keys |
Function to filter or sort keys. Receives the object and its path. |
npm install vue-json-viewimport { VueJsonView } from 'vue-json-view'
import 'vue-json-view/dist/vue-json-view.css'<script setup lang="ts">
import { VueJsonView } from 'vue-json-view'
import 'vue-json-view/dist/vue-json-view.css'
const data = {
foo: 'bar',
baz: [1, 2, 3],
nested: {
a: 1,
b: 2,
},
}
</script>
<template>
<VueJsonView
:data="data"
root-name="Data"
:expand-on-created-and-updated="(path) => path.length < 2"
/>
</template>