Skip to content

fix(vue): run devtools plugins only in the client environment - #17515

Merged
matthewp merged 2 commits into
withastro:mainfrom
barry166:barry/vue-devtools-client-env-17494
Aug 2, 2026
Merged

fix(vue): run devtools plugins only in the client environment#17515
matthewp merged 2 commits into
withastro:mainfrom
barry166:barry/vue-devtools-client-env-17494

Conversation

@barry166

Copy link
Copy Markdown
Contributor

Changes

Fixes #17494.

  • Restricts the plugins returned by vite-plugin-vue-devtools to Vite's client environment.
  • Keeps the browser devtools overlay and inspector available while preventing their styled Vue module from being transformed during Astro SSR, where Vite 8 has not initialized the CSS modules cache yet.
  • Adds a dev-server regression test with vue({ devtools: true }) enabled.
  • Adds a patch changeset for @astrojs/vue.

Testing

  • pnpm -C packages/integrations/vue build
  • pnpm -C packages/integrations/vue test (24 passing)
  • pnpm exec biome check packages/integrations/vue/src/index.ts packages/integrations/vue/test/basics.test.ts packages/integrations/vue/test/fixtures/basics/astro.config.mjs

The new test fails on main with Vite 8's Cannot read properties of undefined (reading 'get') CSS transform error and passes with this change.

Docs

No documentation update is needed; this restores the existing devtools: true behavior.

Vite 8 processes Astro SSR modules before the client CSS cache is initialized. Confining Vue devtools plugins to the client environment preserves their browser behavior while keeping their styled overlay out of SSR.

Constraint: Vite 8 dev environments initialize CSS state per environment
Rejected: Disable Vue devtools entirely | removes a supported development feature
Confidence: high
Scope-risk: narrow
Directive: Keep browser-only devtools plugins out of Astro SSR environments
Tested: @astrojs/vue build; 24 integration tests; Biome; diff check
Not-tested: Browser interaction with the devtools overlay
@changeset-bot

changeset-bot Bot commented Jul 26, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 760d4ce

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

This PR includes changesets to release 30 packages
Name Type
@astrojs/vue Patch
@e2e/astro-envs Patch
@test/astro-cloudflare Patch
@e2e/errors Patch
@e2e/view-transitions Patch
@e2e/vue-component Patch
@test/0-css Patch
@test/astro-children Patch
@test/astro-envs Patch
@test/astro-slots-nested Patch
@test/client-only-child-styles Patch
@test/react-container Patch
@test/css-pure-chunk-query-params Patch
@test/fetch Patch
@test/postcss Patch
@test/slots-vue Patch
@test/ssr-renderers-static-vue Patch
@test/vue-component Patch
@test/vue-with-multi-renderer Patch
@test/astro-cloudflare-vite-plugin Patch
@test/astro-cloudflare-with-vue Patch
@test/react-component Patch
@test/vue-app-entrypoint-async Patch
@test/vue-app-entrypoint-css Patch
@test/vue-app-entrypoint-no-export-default Patch
@test/vue-app-entrypoint-relative Patch
@test/vue-app-entrypoint-src-absolute Patch
@test/vue-app-entrypoint Patch
@test/vue-basics Patch
vue-prop-types 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

@github-actions github-actions Bot added pkg: vue Related to Vue (scope) pkg: integration Related to any renderer integration (scope) labels Jul 26, 2026
@matthewp
matthewp merged commit 023e7be into withastro:main Aug 2, 2026
41 of 42 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: integration Related to any renderer integration (scope) pkg: vue Related to Vue (scope)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

astro dev crashes with "Cannot read properties of undefined (reading 'get')" when Vue devtools enabled with Vite 8

2 participants