diff --git a/.gitignore b/.gitignore index f4d403722e..c143868582 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,5 @@ packages/devtools/client/public/discovery/index.html # Agent skills from npm packages (managed by skills-npm) **/skills/npm-* + +.context diff --git a/docs/content/2.module/3.migration-v4.md b/docs/content/2.module/3.migration-v4.md index e783a0a41d..add1d46c10 100644 --- a/docs/content/2.module/3.migration-v4.md +++ b/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. diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts index 54920251cf..121696f979 100644 --- a/packages/devtools-kit/src/_types/client-api.ts +++ b/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: { diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts index 903acd9478..3e78dc757c 100644 --- a/packages/devtools-kit/src/_types/options.ts +++ b/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 } diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue index d5a4d2bc40..8f3f994b91 100644 --- a/packages/devtools/client/components/DockingPanel.vue +++ b/packages/devtools/client/components/DockingPanel.vue @@ -31,7 +31,6 @@ function toggleSplitScreen() {
{{ splitScreenEnabled ? 'Close Split Screen' : 'Split Screen' }} -
diff --git a/packages/devtools/client/components/PictureInPictureButton.vue b/packages/devtools/client/components/PictureInPictureButton.vue deleted file mode 100644 index 5f5a380a29..0000000000 --- a/packages/devtools/client/components/PictureInPictureButton.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - diff --git a/packages/devtools/client/composables/telemetry.ts b/packages/devtools/client/composables/telemetry.ts index 3b21f21a6d..fbeb273c0b 100644 --- a/packages/devtools/client/composables/telemetry.ts +++ b/packages/devtools/client/composables/telemetry.ts @@ -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) } diff --git a/packages/devtools/client/pages/index.vue b/packages/devtools/client/pages/index.vue index 5ed6f7514e..1b3f298f11 100644 --- a/packages/devtools/client/pages/index.vue +++ b/packages/devtools/client/pages/index.vue @@ -1,31 +1,19 @@