mcpField
D
devtools-vue

devtools-vue

github.com/vercel-labsDevelopment18.8k111 installsUpdated 5d ago
Repository

About devtools-vue

A Vue adapter for adding the json-render devtools panel inside an existing Vue provider. The panel includes shared devtools controls and renders nothing in production builds.

Key features

  1. 01Mount a devtools panel in Vue
  2. 02Use shared devtools controls
  3. 03Open the panel with a keyboard shortcut
  4. 04Hide the panel in production

Use cases

  1. 01Inspect json-render during development
  2. 02Access devtools controls from a Vue app

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vercel-labs/json-render --skill devtools-vue

After installing, type/devtools-vuein Claude Code to confirm it loaded.

Details

From the project README

@json-render/devtools-vue

Vue adapter for the json-render devtools panel. Read skills/devtools/SKILL.md for the shared panel capabilities, props, docking behavior, and server-side stream taps.

Install

npm install @json-render/devtools @json-render/devtools-vue

Mount the panel

Mount JsonRenderDevtools inside the existing Vue json-render provider:

<script setup>
import { JsonRenderDevtools } from "@json-render/devtools-vue";
</script>

<template>
  <JSONUIProvider :registry="registry">
    <Renderer :spec="spec" :registry="registry" />
    <JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
  </JSONUIProvider>
</template>

The component renders nothing in production builds. The panel provides the shared devtools controls, including the Ctrl/Cmd + Shift + J shortcut. Keep server-side stream instrumentation in @json-render/devtools.

Comments

Markdown supported