devtools-app-setuplisted
Install: claude install-skill cill-i-am/task-tracker
# TanStack Devtools App Setup
## Setup
### React (primary)
Install as dev dependencies:
```bash
npm install -D @tanstack/react-devtools @tanstack/devtools-vite
```
Mount `TanStackDevtools` at the root of your application:
```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import App from './App'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
<TanStackDevtools />
</StrictMode>,
)
```
Add plugins via the `plugins` prop. Each plugin needs `name` (string) and `render` (JSX element or render function):
```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
;<TanStackDevtools
plugins={[
{
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
},
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
```
### Vue
```bash
npm install -D @tanstack/vue-devtools
```
Vue uses `component` (not `render`) in plugin definitions. This is the `TanStackDevtoolsVuePlugin` type:
```vue
<script setup lang="ts">
import { TanStackDevtools } from '@tanstack/vue-devtools'
import type { TanStackDevtoolsVuePlugin } from '@tanstack/vue-devtools'
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
const plugins: