devtools-app-setup

# 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:...