Vue

Installation

npm install inspect-value

Integration Pattern

Vue can pass properties to custom elements using the .prop modifier:

<script setup>
import 'inspect-value';
import { ref } from 'vue';

const data = ref({ hello: 'world', items: [1, 2, 3] });
</script>

<template>
  <inspect-value :value.prop="data" name="myData" theme="inspect" />
</template>

For more control, use ref() + onMounted:

<script setup>
import 'inspect-value';
import { ref, onMounted, watch } from 'vue';

const el = ref(null);
const data = ref({ hello: 'world' });

function update() {
  if (!el.value) return;
  el.value.value = data.value;
}

onMounted(update);
watch(data, update, { deep: true });
</script>

<template>
  <inspect-value ref="el" name="myData" />
</template>

Vite config for custom elements

Tell Vue’s template compiler to treat inspect-* tags as custom elements:

vite.config.js

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('inspect-'),
        },
      },
    }),
  ],
};

Live Demos

All JavaScript Types

Every built-in JS type rendered with specialized formatting.

All Types

Strings, numbers, booleans, arrays, objects, Date, RegExp, URL, Map, Set, Error, TypedArray — all expanded.

Theme Switcher

Switch between 6 built-in themes.

Themes

Click a theme button to switch. The inspector re-renders instantly.

Editable JSON

Edit JSON in the textarea and see the live inspector update. A natural fit for Vue’s v-model.

Editable JSON

Type or paste JSON on the left. The inspector on the right updates as you type.

Search & Filter

Deep search across nested structures with three modes.

Search & Filter

Switch between filter, filter-strict, and highlight modes. The search bar is built into the component.

TypeScript

The package includes Vue type declarations. Types are available after import:

import 'inspect-value';

The GlobalComponents interface is augmented so <inspect-value> and <inspect-panel> get autocomplete in Vue templates.