TanStack · AlemTuzlak · Nov 25, 2025 · Oct 21, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/.changeset/gold-readers-create.md b/.changeset/gold-readers-create.md
@@ -0,0 +1,6 @@
+---
+'@tanstack/vue-devtools': minor
+'@tanstack/devtools': patch
+---
+
+feat: vue devtools
diff --git a/examples/vue/basic/.gitignore b/examples/vue/basic/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/basic/README.md b/examples/vue/basic/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i` or `bun i`
+- `npm run dev` or `yarn dev` or `pnpm dev` or `bun dev`
diff --git a/examples/vue/basic/eslint.config.js b/examples/vue/basic/eslint.config.js
@@ -0,0 +1,17 @@
+// @ts-check
+
+import pluginVue from 'eslint-plugin-vue'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    files: ['*.vue', '**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  },
+]
diff --git a/examples/vue/basic/index.html b/examples/vue/basic/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Query Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@tanstack/query-example-vue-basic",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/devtools": "^0.6.22",
+    "@tanstack/vue-devtools": "^0.1.0",
+    "@tanstack/vue-query": "^5.90.5",
+    "@tanstack/vue-query-devtools": "^6.1.0",
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "typescript": "~5.9.2",
+    "vite": "^7.1.7"
+  }
+}
diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import {
+  TanStackDevtools,
+  TanStackDevtoolsVuePlugin,
+} from '@tanstack/vue-devtools'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+import Posts from './Posts.vue'
+import Post from './Post.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { Posts, Post, TanStackDevtools, VueQueryDevtoolsPanel },
+  setup() {
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
+
+    const postId = ref(-1)
+    const setPostId = (id: number) => {
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
+
+    const plugins: TanStackDevtoolsVuePlugin[] = [
+      {
+        name: 'Vue Query',
+        component: VueQueryDevtoolsPanel,
+      },
+    ]
+
+    return {
+      isVisited,
+      postId,
+      setPostId,
+      plugins,
+    }
+  },
+})
+</script>
+
+<template>
+  <h1>Vue Query - Basic</h1>
+  <p>
+    As you visit the posts below, you will notice them in a loading state the
+    first time you load them. However, after you return to this list and click
+    on any posts you have already visited again, you will see them load
+    instantly and background refresh right before your eyes!
+    <strong>
+      (You may need to throttle your network speed to simulate longer loading
+      sequences)
+    </strong>
+  </p>
+  <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
+  <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+  <TanStackDevtools
+    :eventBusConfig="{ connectToServerBus: true }"
+    :plugins="plugins"
+  />
+</template>
diff --git a/examples/vue/basic/src/Post.vue b/examples/vue/basic/src/Post.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+
+import { Post } from './types'
+
+const fetcher = async (id: number): Promise<Post> =>
+  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
+    (response) => response.json(),
+  )
+
+export default defineComponent({
+  name: 'PostDetails',
+  props: {
+    postId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup(props) {
+    const { isPending, isError, isFetching, data, error } = useQuery({
+      queryKey: ['post', props.postId],
+      queryFn: () => fetcher(props.postId),
+    })
+
+    return { isPending, isError, isFetching, data, error }
+  },
+})
+</script>
+
+<template>
+  <h1>Post {{ postId }}</h1>
+  <a @click="$emit('setPostId', -1)" href="#"> Back </a>
+  <div v-if="isPending" class="update">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <h1>{{ data.title }}</h1>
+    <div>
+      <p>{{ data.body }}</p>
+    </div>
+    <div v-if="isFetching" class="update">Background Updating...</div>
+  </div>
+</template>
+
+<style scoped>
+.update {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/basic/src/Posts.vue b/examples/vue/basic/src/Posts.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+
+import type { Post } from './types'
+
+const fetcher = async (): Promise<Post[]> =>
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
+
+export default defineComponent({
+  name: 'PostsList',
+  props: {
+    isVisited: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup() {
+    const { isPending, isError, isFetching, data, error, refetch } = useQuery({
+      queryKey: ['posts'],
+      queryFn: fetcher,
+    })
+
+    return { isPending, isError, isFetching, data, error, refetch }
+  },
+})
+</script>
+
+<template>
+  <h1>Posts</h1>
+  <div v-if="isPending">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <ul>
+      <li v-for="item in data" :key="item.id">
+        <a
+          @click="$emit('setPostId', item.id)"
+          href="#"
+          :class="{ visited: isVisited(item.id) }"
+          >{{ item.title }}</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.visited {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/basic/src/main.ts b/examples/vue/basic/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+import App from './App.vue'
+
+createApp(App).use(VueQueryPlugin).mount('#app')
diff --git a/examples/vue/basic/src/shims-vue.d.ts b/examples/vue/basic/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/basic/src/types.d.ts b/examples/vue/basic/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/basic/tsconfig.json b/examples/vue/basic/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}
diff --git a/examples/vue/basic/vite.config.ts b/examples/vue/basic/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ['@tanstack/vue-query', 'vue-demi'],
+  },
+})
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.13",
-    "sherif": "^1.6.1",
+    "sherif": "^1.7.0",
     "size-limit": "^11.2.0",
     "tinyglobby": "^0.2.15",
     "typescript": "~5.9.2",

diff --git a/packages/devtools-utils/package.json b/packages/devtools-utils/package.json
@@ -53,7 +53,8 @@
   "peerDependencies": {
     "@types/react": ">=19.0.0",
     "react": ">=19.0.0",
-    "solid-js": ">=1.9.7"
+    "solid-js": ">=1.9.7",
+    "vue": ">=3.2.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -64,6 +65,9 @@
     },
     "solid-js": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "files": [

diff --git a/packages/devtools-utils/src/vue/index.ts b/packages/devtools-utils/src/vue/index.ts
@@ -0,0 +1,2 @@
+export * from './panel'
+export * from './plugin'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './panel'
		export * from './plugin'