import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/api/devtools-vue")

# @json-render/devtools-vue

Vue adapter for the json-render devtools. Drop-in `<JsonRenderDevtools />` component.

See the [Devtools guide](/docs/devtools) for the drop-in walkthrough.

## JsonRenderDevtools

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

### Props

Same shape as the React adapter:

- `spec`
- `catalog`
- `messages`
- `initialOpen`
- `position`
- `hotkey`
- `bufferSize`
- `onEvent`

In production builds the component renders nothing.