TanStack Devtools Vue Adapter

The Vue adapter wraps TanStackDevtoolsCore in a Vue 3 component, using Vue's <Teleport> to render plugins and their tab titles into the correct DOM containers managed by the devtools shell.

Installation#

npm install @tanstack/vue-devtools

npm install @tanstack/vue-devtools

Component Props#

The TanStackDevtools component accepts the following props, defined by the TanStackDevtoolsVueInit interface:

Plugin Type#

Each plugin in the plugins array must conform to the TanStackDevtoolsVuePlugin type:

type TanStackDevtoolsVuePlugin = {
  id?: string
  component: Component
  name: string | Component
  props?: Record<string, any>
}

type TanStackDevtoolsVuePlugin = {
  id?: string
  component: Component
  name: string | Component
  props?: Record<string, any>
}

Key Difference from React#

The Vue adapter uses component (a Vue component reference) instead of render (a JSX element) in plugin definitions. Props are provided through the props field and bound to the component with v-bind, rather than being embedded directly in a JSX expression.

<!-- Vue: pass component reference + props -->
<script setup lang="ts">
import { TanStackDevtools } from '@tanstack/vue-devtools'
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'

const plugins = [
  {
    name: 'Vue Query',
    component: VueQueryDevtoolsPanel,
    props: { style: 'height: 100%' },
  },
]
</script>

<template>
  <TanStackDevtools :plugins="plugins" />
</template>

<!-- Vue: pass component reference + props -->
<script setup lang="ts">
import { TanStackDevtools } from '@tanstack/vue-devtools'
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'

const plugins = [
  {
    name: 'Vue Query',
    component: VueQueryDevtoolsPanel,
    props: { style: 'height: 100%' },
  },
]
</script>

<template>
  <TanStackDevtools :plugins="plugins" />
</template>

Exports#

The @tanstack/vue-devtools package exports:

• TanStackDevtools -- The main Vue component that renders the devtools panel.
• TanStackDevtoolsVuePlugin (type) -- The type for plugin definitions.
• TanStackDevtoolsVueInit (type) -- The props interface for the TanStackDevtools component.

The package depends on @tanstack/devtools (the core package), which provides TanStackDevtoolsCore, TanStackDevtoolsConfig, ClientEventBusConfig, and other core utilities.