mcpField
D
devtools-vue

devtools-vue

github.com/vercel-labs開発18.8k111 回インストール4 日前に更新
リポジトリ

devtools-vue について

既存の Vue プロバイダーに json-render 開発ツールパネルを追加するアダプターです。共通の操作機能を備え、本番ビルドでは何も描画しません。

主な機能

  1. 01Vue に開発ツールパネルを設置
  2. 02共通の開発ツール操作を利用
  3. 03キーボードショートカットでパネルを表示
  4. 04本番環境ではパネルを非表示

活用シーン

  1. 01開発中に json-render を確認
  2. 02Vue アプリから開発ツールを操作

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/devtools-vueを入力して読み込まれたか確認します。

詳細

@json-render/devtools-vue

json-render の devtools パネル用 Vue アダプターです。共通パネルの機能、props、ドッキング動作、サーバー側のストリームタップについては、skills/devtools/SKILL.md をお読みください。

インストール

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

パネルをマウントする

既存の Vue json-render プロバイダー内に JsonRenderDevtools をマウントします。

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

本番ビルドでは、このコンポーネントは何も描画しません。このパネルには、Ctrl/Cmd + Shift + J のショートカットなど、共通の devtools コントロールが用意されています。サーバー側のストリーム計測は @json-render/devtools に保持してください。

コメント

Markdown 対応