Skip to content

Upgrading @nuxt/devtools 3 to 4

Breaking3.4.4 → 4.0.0Breaking16Security4New16Changed23Fixed55Other13

Full comparisonBack to @nuxt/devtools
BreakingUpgrade verdict

12 breaking changes and 4 security fixes.

In plain terms
  • The embedded dock is now the only way the client UI runs; other client modes are removed.
  • The package no longer ships a CommonJS build or the old type declaration files, so CommonJS consumers must switch to ESM.
  • The floating devtools panel is gone; Vite DevTools is always used instead.
  • Built-in remote procedure call functions no longer accept the old authentication token parameters.
Must act Top 5 of 16 that need code or config changes

Adds @devframes/hub ^1.2.6, @devframes/plugin-assets ^1.2.6, @devframes/plugin-code-server ^1.2.6, @devframes/plugin-data-inspector ^1.2.6, @devframes/plugin-og ^1.2.6, @nuxt/devtools-assets 4.0.0, @vitejs/devtools ^0.8.0, @vitejs/devtools-kit ^0.8.0, devframe ^1.2.6, escape-string-regexp ^5.0.0, magic-string ^1.4.5, mlly ^1.8.2, unplugin ^3.5.0, verkit ^0.5.0, vite-plugin-vue-devtools ^9.0.0-beta.1.

Drops @nuxt/devtools-wizard, @nuxt/kit, @vue/devtools-core, @vue/devtools-kit, birpc, execa, get-port-please, image-meta, is-installed-globally, launch-editor, ohash, package-manager-detector, pkg-types, semver, sirv, structured-clone-es, tinyexec, unstorage, vite-plugin-inspect, which, ws.

Installs 93 packages in all (was 132).

What you must change

Breaking12
Makes the embedded dock the only client mode.
4.0.0GitHub ReleaseSummarizedView source
Removes the CJS build and legacy dts files.
4.0.0GitHub ReleaseSummarizedView source
Always uses Vite DevTools and removes the floating panel.
Vite DevTools
4.0.0GitHub ReleaseSummarizedView source
Removes deprecated auth token arguments from builtin RPC functions.
4.0.0GitHub ReleaseSummarizedView source
Slims the install size of @nuxt/devtools.
@nuxt/devtools
4.0.0GitHub ReleaseSummarizedView source
Removes the @vue/devtools integration.
@vue/devtools
4.0.0GitHub ReleaseSummarizedView source
Reuses the built-in Terminals dock via ctx.terminals.
ctx.terminals
4.0.0GitHub ReleaseSummarizedView source
Finishes Messages and terminals convergence on Devframe 0.7.7.
4.0.0GitHub ReleaseSummarizedView source
Replaces server discovery with the Data Inspector plugin.
4.0.0GitHub ReleaseSummarizedView source
Removes the global install and the wizard package.
4.0.0GitHub ReleaseSummarizedView source
Always uses Vite DevTools and removes the floating panel.
4.0.0-alpha.1GitHub ReleaseSummarizedView source
Migrates execa to tinyexec.
execatinyexec
4.0.0GitHub ReleaseSummarizedView source
Security4
Hardens the RPC surface against traversal, spoofing, and dead auth UI.
4.0.0GitHub ReleaseSummarizedView source
Contains asset RPC paths and the storage denylist to what the UI may touch.
4.0.0GitHub ReleaseSummarizedView source
Contains asset RPC paths and the storage denylist to what the UI may touch.
4.0.0-beta.4GitHub ReleaseSummarizedView source
Hardens the RPC surface against traversal, spoofing, and dead auth UI.
4.0.0-alpha.18GitHub ReleaseSummarizedView source

API changes

Generated by DepDelta from published .d.ts files. Not mixed with prose notes.

  • removed: property Window.__NUXT_DEVTOOLS_IS_POPUP__?: boolean
  • removed: property Window.__NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsGlobal
  • removed: property Window.documentPictureInPicture?: any
  • removed: interface RuntimeConfigApp
  • removed: property RuntimeConfigApp.devtools?: Pick<ModuleOptions, 'iframeProps'>
  • removed: const clientDir: string
  • removed: const distDir: string
  • removed: function isGlobalInstall(): boolean
  • removed: const _default: any
  • removed: default _default
  • added: const plugin: Plugin
  • added: default plugin
  • removed: const popupWindow: import('vue').ShallowRef<Window | null, Window | null>
  • removed: const state: import('vue').Ref<DevToolsFrameState, DevToolsFrameState>
  • removed: const _default: () => void
  • removed: default _default
  • removed: declare global
  • removed: declare module '@nuxt/schema'
  • added: declare global
  • removed: interface AnalyzeBuildingState
  • removed: interface NormalizedHeadTag
  • removed: interface SocialPreviewCard
  • removed: interface SocialPreviewResolved
  • removed: property AnalyzeBuildingState.name: string
  • removed: property AnalyzeBuildingState.processId: string
  • removed: property NormalizedHeadTag.name: string
  • removed: property NormalizedHeadTag.tag: string
  • removed: property NormalizedHeadTag.value: string
  • removed: property SocialPreviewCard.description?: SocialPreviewCardItem[]
  • removed: property SocialPreviewCard.favicon?: SocialPreviewCardItem[]
  • removed: property SocialPreviewCard.image?: SocialPreviewCardItem[]
  • removed: property SocialPreviewCard.imageAlt?: SocialPreviewCardItem[]
  • removed: property SocialPreviewCard.title?: SocialPreviewCardItem[]
  • removed: property SocialPreviewCard.url?: SocialPreviewCardItem[]
  • removed: property SocialPreviewResolved.description?: string
  • removed: property SocialPreviewResolved.favicon?: string
  • removed: property SocialPreviewResolved.image?: string
  • removed: property SocialPreviewResolved.imageAlt?: string
  • removed: property SocialPreviewResolved.title?: string
  • removed: property SocialPreviewResolved.url?: string
  • removed: const NuxtDevtoolsFrame: VueElementConstructor