/VObjectInspector

Vue 3 component for displaying JavaScript objects

Primary LanguageVueMIT LicenseMIT

Commitizen friendly Commitizen friendly Commitizen friendly

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 'v-object-inspector/dist/style.css'
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'
import 'v-object-inspector/dist/style.css'
</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 levels, change expandLevel to a very big number.
    • If want to collapse all levels, change expandLevel to 0.
    • If already changed expand by hand, change the expandLevel to a negative number, then change it back in $nextTick.

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 to myKey node (will also expand all parent nodes)
    • ['$.myKey.myArr']: expand to myArr node (will also expand all parent nodes)
    • ['$.a', '$.b']: expand first-level nodes a and b
    • ['$.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, and constructor)
  • 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

Thanks