devtools-vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@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.

json-render devtools面板的Vue适配器。通用面板功能、props、停靠行为以及服务端流接入相关内容，请查阅

skills/devtools/SKILL.md

。

Install

安装

bash

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

bash

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

Mount the panel

挂载面板

Mount

JsonRenderDevtools

inside the existing Vue json-render provider:

vue

<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

shortcut. Keep server-side stream instrumentation in

@json-render/devtools

将

JsonRenderDevtools

挂载到现有Vue json-render provider内部：

vue

<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>

该组件在生产构建中不会渲染任何内容。面板提供通用的devtools控件，包括

Ctrl

Cmd

Shift

快捷键。服务端流插桩功能保留在

@json-render/devtools

包中。