0.1.3 • Published 6 months ago
v-object-inspector v0.1.3
v-object-inspector
A Vue 3 component for displaying JavaScript objects like Browser DevTools (live demo).
This repository is a rewrite of vue-object-inspector with Vue 3 and TypeScript.
Installation
npm install v-object-inspector
Usage Example
Register as a global component:
import { createApp } from 'vue'
import VObjectInspector from 'v-object-inspector'
import App from './App.vue'
const app = createApp(App)
app.use(VObjectInspector)
app.mount('#app')
Or import locally:
<script setup lang="ts">
import { VObjectInspector } from 'v-object-inspector'
</script>
<template>
<VObjectInspector :data="{ a: 1, b: 2 }" />
</template>
VObjectInspector API
Name | Description | Type | Default | Required |
---|---|---|---|---|
data | the JavaScript object to inspect | any | — | true |
name | the root node's prefix name | string | — | false |
expandLevel | the depth level to which the tree should be initially expanded | number | 0 | false |
expandedPaths | the paths in the tree that should be initially expanded | string[] | [] | false |
showNonEnumerable | whether to show non-enumerable properties | boolean | false | false |
sortObjectKeys | whether to sort object keys | boolean \| function | false | false |
objectMaxProperties | the maximal number of object properties to show in preview | number | 5 | false |
arrayMaxProperties | the maximal number of array properties to show in preview | number | 10 | false |
darkTheme | whether to use the dark theme or the light theme | boolean | false | false |
data
- Description: JavaScript object to inspect
- Type:
any
- Default: —
- Required: true
name
- Description: the root node's prefix name
- Type:
string
- Default: —
- Required: false
expandLevel
- Description: the depth level to which the tree should be initially expanded
- Type:
number
- Default:
0
- Required: false
- Note: the root node has level 0 and its children have level 1
- Scenarios:
- If want to expand all level, change
expandLevel
to a very big number. - If want to collapse all level, change
expandLevel
to 0. - If already change expand by hand, change the
expandLevel
to a negative number, then change it back in$nextTick
.
- If want to expand all level, change
expandPaths
- Description: the paths in the tree that should be initially expanded
- Type:
string[]
- Default:
[]
- Required: false
- Note: a path string in the
expandPaths
array follows the syntax like JSONPath - Examples:
['$']
: expand root node,$
always refers to the root node['$.myKey']
: expand tomyKey
node (will also expand all parent nodes)- this is different from react-inspector
['$.myKey.myArr']
: expand tomyArr
node (will also expand all parent nodes)['$.a', '$.b']
: expand first level nodesa
andb
['$.1']
: expand by array index['$.*']
: wildcard, expand all level 2 nodes, equivalent to:expandLevel="2"
['$.*.*']
: wildcard, expand all level 3 nodes, equivalent to:expandLevel="3"
expandLevel vs expandPaths
Both expandLevel
and expandPaths
are reactive.
Try avoid using both expandLevel
and expandPaths
at the same time.
If expandLevel
and expandPaths
are used together, when one of them changes, only the changed one will take effect and the other one will be ignored.
showNonEnumerable
- Description: whether to show non-enumerable properties (e.g.,
__proto__
,length
, andconstructor
) - Type:
boolean
- Default:
false
- Required: false
sortObjectKeys
- Description: whether to sort object keys
- Type:
boolean | function
- Default:
false
- Required: false
- Note: when a compare function is passed, the keys will be sorted as Array.sort() with a compared function
- Examples:
true
: sort object keys in alphabetical order (except for arrays)reverseSortFunc
: sort in reverse alphabetical order (except for arrays)const reverseSortFunc = (a, b) => (b > a ? 1 : -1)
objectMaxProperties
- Description: the maximal number of object properties to show in preview
- Type:
number
- Default:
5
- Required: false
arrayMaxProperties
- Description: the maximal number of array properties to show in preview
- Type:
number
- Default:
10
- Required: false
darkTheme
- Description: whether to use the dark theme or the light theme
- Type:
boolean
- Default:
false
- Required: false