feat(v4)!: always use Vite DevTools, remove floating panel (#952)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

.gitignore

@@ -59,3 +59,5 @@ packages/devtools/client/public/discovery/index.html
 
 # Agent skills from npm packages (managed by skills-npm)
 **/skills/npm-*
+
+.context

docs/content/2.module/3.migration-v4.md

@@ -79,3 +79,34 @@ The `runWizard` server RPC function has been removed from `ServerFunctions`. The
 ```
 
 The `WizardFunctions`, `WizardActions`, and `GetWizardArgs` types have been removed from `@nuxt/devtools-kit`.
+
+## Vite DevTools Integration is Now Always Enabled
+
+The `viteDevTools` module option has been removed. Nuxt DevTools now always integrates with [Vite DevTools](https://github.com/vitejs/devtools) as a dock entry. The built-in floating panel has been removed — DevTools is accessed through the Vite DevTools panel instead.
+
+```diff
+export default defineNuxtConfig({
+  devtools: {
+    enabled: true,
+-   viteDevTools: true,
+  },
+})
+```
+
+### `client.devtools` Methods Now Control Vite DevTools
+
+The `client.devtools.open()`, `client.devtools.close()`, and `client.devtools.toggle()` methods still work but now control the Vite DevTools panel:
+
+- `open()` opens the Vite DevTools panel and switches to the Nuxt DevTools dock entry
+- `close()` closes the Vite DevTools panel
+- `toggle()` toggles the Nuxt DevTools dock entry in the Vite DevTools panel
+
+The `Shift+Alt+D` keyboard shortcut now toggles the Nuxt DevTools entry in the Vite DevTools panel.
+
+### `client.devtools.popup` Removed
+
+The Picture-in-Picture popup feature (`client.devtools.popup`) has been removed. This was an experimental feature that required Chrome 111+.
+
+### `showPanel` and `minimizePanelInactive` Settings Removed
+
+The `showPanel` and `minimizePanelInactive` UI settings have been removed from `NuxtDevToolsOptions` as the built-in floating panel no longer exists.

packages/devtools-kit/src/_types/client-api.ts

@@ -72,17 +72,6 @@ export interface NuxtDevtoolsHostClient {
     toggle: () => void
     reload: () => void
     navigate: (path: string) => void
-
-    /**
-     * Popup the DevTools frame into Picture-in-Picture mode
-     *
-     * Requires Chrome 111 with experimental flag enabled.
-     *
-     * Function is undefined when not supported.
-     *
-     * @see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
-     */
-    popup?: () => any
   }
 
   app: {

packages/devtools-kit/src/_types/options.ts

@@ -43,14 +43,6 @@ export interface ModuleOptions {
    */
   viteInspect?: boolean
 
-  /**
-   * Enable Vite DevTools integration
-   *
-   * @experimental
-   * @default false
-   */
-  viteDevTools?: boolean
-
   /**
    * Disable dev time authorization check.
    *
@@ -201,12 +193,10 @@ export interface NuxtDevToolsOptions {
     hiddenTabCategories: string[]
     hiddenTabs: string[]
     interactionCloseOnOutsideClick: boolean
-    minimizePanelInactive: number
     pinnedTabs: string[]
     scale: number
     showExperimentalFeatures: boolean
     showHelpButtons: boolean
-    showPanel: boolean | null
     sidebarExpanded: boolean
     sidebarScrollable: boolean
   }

packages/devtools/client/components/DockingPanel.vue

@@ -31,7 +31,6 @@ function toggleSplitScreen() {
         <div i-carbon-split-screen />
         {{ splitScreenEnabled ? 'Close Split Screen' : 'Split Screen' }}
       </NButton>
-      <PictureInPictureButton />
     </div>
     <div px3 py2 flex="~ gap2">
       <NButton n="primary sm" @click="refreshData">

packages/devtools/client/components/PictureInPictureButton.vue

@@ -15,7 +15,6 @@ export function telemetry(event: string, payload?: object, immediate = false) {
     os: userAgentInfo.os.name,
     osVersion: userAgentInfo.os.version,
     deviceType: userAgentInfo.device.type,
-    inPopup: !!window.__NUXT_DEVTOOLS_IS_POPUP__,
     ...payload,
   }, immediate)
 }

packages/devtools/client/composables/telemetry.ts

@@ -1,31 +1,19 @@
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 import { ref } from 'vue'
-import { useClient } from '~/composables/client'
 import { isFirstVisit } from '~/composables/storage'
-import { useDevToolsOptions } from '~/composables/storage-options'
 import { telemetryEnabled } from '~/composables/telemetry'
 
 definePageMeta({
   layout: 'none',
 })
 
-const client = useClient()
 const telemetryModel = ref(true)
 
-const {
-  showPanel,
-} = useDevToolsOptions('ui')
-
 function visit() {
   telemetryEnabled.value = telemetryModel.value
   isFirstVisit.value = false
 }
-
-function hideFloatingPanel() {
-  showPanel.value = false
-  client.value.devtools.close()
-}
 </script>
 
 <template>
@@ -48,9 +36,6 @@ function hideFloatingPanel() {
       <NButton to="/modules/overview" n="lg primary" @click="visit">
         <span>Get Started</span>
       </NButton>
-      <NButton v-if="showPanel !== false" n="borderless orange" @click="hideFloatingPanel">
-        <span>Always hide the floating panel</span>
-      </NButton>
     </div>
     <div p4>
       <div flex="~ col gap-2" mxa>

packages/devtools/client/pages/index.vue

@@ -13,13 +13,11 @@ definePageMeta({
 
 const {
   interactionCloseOnOutsideClick,
-  showPanel,
   showHelpButtons,
   scale,
   hiddenTabs,
   pinnedTabs,
   hiddenTabCategories,
-  minimizePanelInactive,
   sidebarExpanded,
   sidebarScrollable,
 } = useDevToolsOptions('ui')
@@ -51,15 +49,6 @@ const scaleOptions = [
   ['Huge', 18 / 15],
 ]
 
-const MinimizeInactiveOptions = [
-  ['Always', 0],
-  ['1s', 1000],
-  ['2s', 2000],
-  ['5s', 5000],
-  ['10s', 10000],
-  ['Never', -1],
-]
-
 const categories = getCategorizedTabs(useAllTabs())
 
 function toggleTab(name: string, v?: boolean) {
@@ -116,11 +105,6 @@ watchEffect(() => {
   if (client.value)
     client.value.app.frameState.value.closeOnOutsideClick = interactionCloseOnOutsideClick.value
 })
-
-watchEffect(() => {
-  if (client.value)
-    client.value.app.frameState.value.minimizePanelInactive = minimizePanelInactive.value
-})
 </script>
 
 <template>
@@ -232,19 +216,6 @@ watchEffect(() => {
             <span>Show help buttons</span>
           </NCheckbox>
 
-          <NCheckbox v-model="showPanel" n-primary>
-            <span>Show the floating panel</span>
-          </NCheckbox>
-
-          <div mx--2 my1 h-1px border="b base" op75 />
-
-          <p>Minimize floating panel on inactive</p>
-          <NSelect v-model.number="minimizePanelInactive" n-primary>
-            <option v-for="i of MinimizeInactiveOptions" :key="i[0]" :value="i[1]">
-              {{ i[0] }}
-            </option>
-          </NSelect>
-
           <div mx--2 my1 h-1px border="b base" op75 />
 
           <p>Open In Editor</p>

packages/devtools/client/pages/settings.vue

@@ -18,30 +18,23 @@ export function ensureVueDevTools() {
 
   const state = useDevToolsFrameState()
 
-  const isInPopup = window.__NUXT_DEVTOOLS_IS_POPUP__
-
-  function toggleClientDetected(state: boolean) {
+  function toggleClientDetected(detected: boolean) {
     if (connected.value) {
       rpc.value.updateDevToolsClientDetected({
-        iframe: state,
+        iframe: detected,
       })
     }
     else {
       onRpcConnected(() => {
         rpc.value.updateDevToolsClientDetected({
-          iframe: state,
+          iframe: detected,
         })
       })
     }
   }
 
   watchEffect(() => {
-    if (isInPopup) {
-      toggleClientDetected(true)
-    }
-    else {
-      toggleClientDetected(state.value?.open ?? false)
-    }
+    toggleClientDetected(state.value?.open ?? false)
   })
 
   createRpcClient(functions, {