feat(devtools): restore Vue DevTools through vite-plugin-vue-devtools v9

[antfubot]

What

vuejs/devtools v9.0.0-beta.0 is now rebuilt on Vite DevTools and Devframe, so the Vue DevTools integration removed in #1056 can come back: vite-plugin-vue-devtools is now a dependency of @nuxt/devtools, and the DevTools dock shows both a Nuxt and a Vue DevTools entry.

How

• vite-plugin-vue-devtools@^9.0.0-beta.0 added to the prod catalog and to packages/devtools.
• New integrations/vue-devtools.ts:
  • installs the plugin's two Vite plugins isomorphically ({ server: false } would strip the devtools property), wrapping its dock registration with the existing skipInSSR guard so Nuxt's SSR Vite instance doesn't register a duplicate dock;
  • Nuxt has no Vite HTML entry for the plugin's own client injection to hook into, so the Vue DevTools client hook is loaded through an early Nuxt client plugin importing virtual:vue-devtools-client (same shape as the pre-feat!: remove @vue/devtools integration #1056 integration).
• The vueDevTools module option is restored (default true) to allow opting out.
• vite-plugin-vue-devtools/client added to optimizeDeps.include.

Verified against playgrounds/empty (Nuxt 5 nightly / Vite 8.3): the dock registers the nuxt group and the vue-devtools entry side by side, and the Vue DevTools panel renders the live component tree and state of the Nuxt app inside its iframe.

---

This PR was created with the help of an agent.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vite-plugin-vue-devtools@​9.0.0-beta.0

View full report

[cloudflare-workers-and-pages]

Deploying nuxt-devtools with    Cloudflare Pages

Latest commit:	9817231
Status:	✅  Deploy successful!
Preview URL:	https://4f5af24b.nuxt-devtools.pages.dev
Branch Preview URL:	https://moody-hoops-find.nuxt-devtools.pages.dev

View logs

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 2a8a2642-3da2-4991-9b1b-b0c9142d647a

📥 Commits

Reviewing files that changed from the base of the PR and between 04f3cd0 and 9817231.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• packages/devtools-kit/src/_types/options.ts
• packages/devtools/package.json
• packages/devtools/src/constant.ts
• packages/devtools/src/integrations/vue-devtools.ts
• packages/devtools/src/module-main.ts
• packages/devtools/test/devtools-origin.test.ts
• pnpm-workspace.yaml

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds the optional vueDevTools setting, which defaults to true. When enabled, Nuxt registers the Vue DevTools integration. The integration adds Vite plugins in development outside test mode and registers an early client-mode plugin. The package dependency and workspace catalog are updated.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 98172

No actionable regression from this change remains identified; the Vue DevTools integration is ready to merge after normal checks.

Security Architecture Review

Security architecture risk: 🟡 Moderate · up to 98172

The integration is limited to development and can be disabled, but it adds a default-on path to inspect application state. Its authorization behavior and the exception for its beta dependency warrant review before rollout.

Retained concerns

• Medium · security · inferred: The default-on live-state integration adds an upstream plugin and client path, but the available source does not establish whether all of that path inherits the existing client-authorization control. This is a boundary verification gap, not an observed authorization bypass.
• Medium · security · observed: A default-on Vite integration introduces a beta production dependency and explicitly exempts version 9.0.0-beta.0 from the workspace minimum-release-age policy. This reduces a dependency-admission control for code loaded by the development server; it is not evidence that the package is malicious.

Security review details

Security Blast Radius

• inferred — The new live-state path applies by default to opted-in Nuxt DevTools projects during Vite development, not to the inspected module's production or test setup. Whether an unauthenticated browser can reach any upstream Vue DevTools capability is unresolved.

Trust Boundaries and Controls

• observed — Module-level development and test checks, the explicit option gate, and an existing Vite DevTools client-auth configuration are visible. The available source does not show the upstream plugin's enforcement behavior.

Hardening Proposals

• proposed — Before relying on the default-on setting, verify upstream Vue DevTools client and server routes against the existing authorization control, including an unauthenticated browser on an exposed development server. Review whether the beta version needs its release-age exception and whether the dependency should be pinned.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 5 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: restoring Vue DevTools through vite-plugin-vue-devtools v9.
Description check	✅ Passed	The description directly explains the dependency, integration, configuration option, and verification for restoring Vue DevTools.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 5 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}