feat: vue devtools

[DamianOsipiuk]

🎯 Changes

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

[changeset-bot]

🦋 Changeset detected

Latest commit: ffc067d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@tanstack/vue-devtools	Minor
@tanstack/devtools	Patch
@tanstack/react-devtools	Patch
@tanstack/solid-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ffc067d

Command	Status	Duration	Result
nx affected --targets=test:format,test:eslint,t...	✅ Succeeded	1m 39s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	4s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-24 22:24:48 UTC

[pkg-pr-new]

More templates

• ssr
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-solid-start
• @tanstack/query-example-vue-basic
• @tanstack/devtools-example-react-basic
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• @tanstack/devtools-example-react-time-travel

@tanstack/devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools@226

@tanstack/devtools-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-client@226

@tanstack/devtools-ui

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-ui@226

@tanstack/devtools-utils

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@226

@tanstack/devtools-vite

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-vite@226

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-bus@226

@tanstack/devtools-event-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@226

@tanstack/react-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@226

@tanstack/solid-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/solid-devtools@226

@tanstack/vue-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/vue-devtools@226

commit: ffc067d

[AlemTuzlak]

why is this needed exaclty?

[DamianOsipiuk]

Vue does not follow React convention of running render all the time. It creates component once and then relies on the reactivity system.

So if we just keep the component in ref without removing/adding it, it would not trigger Teleport re-rendering.

This means that you will remove the div that devtools panel was teleported to, it will remove the panel, but re-adding the div would not re-add the panel, as Teleport would not re-run.

Therefore we need a hook on panel hide to remove it from the ref so mounting it again would trigger a new render.

Apart from that, hiding the panel should ideally clean it up without keeping it in memory indefinitely as you might not need it for that particular session. It will eat less memory as a result.