diff --git a/CHANGELOG.md b/CHANGELOG.md index 26cfd138db..78cd1c07a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +## [3.1.1](https://github.com/nuxt/devtools/compare/v3.1.0...v3.1.1) (2025-11-25) + + +### Bug Fixes + +* **ui:** remove flash when switching to dark ([#909](https://github.com/nuxt/devtools/issues/909)) ([75a814f](https://github.com/nuxt/devtools/commit/75a814f8a0664a4661e24f9d9c6a6abb73bbc490)) + + +### Features + +* support passing additional permissions to the iframe ([#911](https://github.com/nuxt/devtools/issues/911)) ([bc1d11c](https://github.com/nuxt/devtools/commit/bc1d11c92a7da9bc6e1870417029c50cb66a964e)) + + + # [3.1.0](https://github.com/nuxt/devtools/compare/v3.0.1...v3.1.0) (2025-11-07) diff --git a/docs/content/2.module/0.guide.md b/docs/content/2.module/0.guide.md index 4c588734a2..54961c1c78 100644 --- a/docs/content/2.module/0.guide.md +++ b/docs/content/2.module/0.guide.md @@ -59,6 +59,21 @@ nuxt.hook('devtools:customTabs', (tabs) => { }) ``` +### Iframe Permissions + +By default, iframes have `clipboard-write` and `clipboard-read` permissions enabled. You can add additional permissions using the `permissions` option: + +```ts +const view: ModuleIframeView = { + type: 'iframe', + src: '/url-to-your-module-view', + // Additional permissions to allow in the iframe + permissions: ['camera', 'microphone', 'geolocation'], +} +``` + +These permissions will be merged with the default ones and set on the iframe's `allow` attribute. + Learn more about [DevTools Utility Kit](/module/utils-kit). ## Lazy Service Launching diff --git a/docs/content/2.module/1.utils-kit.md b/docs/content/2.module/1.utils-kit.md index d5b626b7b5..e18adf4476 100644 --- a/docs/content/2.module/1.utils-kit.md +++ b/docs/content/2.module/1.utils-kit.md @@ -39,6 +39,21 @@ addCustomTab(() => ({ })) ``` +The iframe view supports the following options: + +- `src`: URL of the iframe +- `persistent`: Whether to persist the iframe instance when switching tabs (default: `true`) +- `permissions`: Additional permissions to allow in the iframe (merged with default `clipboard-write` and `clipboard-read`) + +```ts +const view: ModuleIframeView = { + type: 'iframe', + src: '/url-to-your-module-view', + persistent: true, + permissions: ['camera', 'microphone'], +} +``` + ### `refreshCustomTabs()` A shorthand for call hook `devtools:customTabs:refresh`. It will refresh all custom tabs. diff --git a/package.json b/package.json index bab73e356d..2afae4d9b2 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "@nuxt-devtools/monorepo", "type": "module", - "version": "3.1.0", + "version": "3.1.1", "private": true, - "packageManager": "pnpm@10.20.0", + "packageManager": "pnpm@10.23.0", "repository": { "type": "git", "url": "git+https://github.com/nuxt/devtools.git" diff --git a/packages/devtools-kit/package.json b/packages/devtools-kit/package.json index 3064f77e76..3e83d748a6 100644 --- a/packages/devtools-kit/package.json +++ b/packages/devtools-kit/package.json @@ -1,7 +1,7 @@ { "name": "@nuxt/devtools-kit", "type": "module", - "version": "3.1.0", + "version": "3.1.1", "license": "MIT", "homepage": "https://devtools.nuxt.com/module/utils-kit", "repository": { diff --git a/packages/devtools-kit/src/_types/custom-tabs.ts b/packages/devtools-kit/src/_types/custom-tabs.ts index 5ed71ad131..e1fd8b312a 100644 --- a/packages/devtools-kit/src/_types/custom-tabs.ts +++ b/packages/devtools-kit/src/_types/custom-tabs.ts @@ -68,6 +68,13 @@ export interface ModuleIframeView { * @default true */ persistent?: boolean + /** + * Additional permissions to allow in the iframe + * These will be merged with the default permissions (clipboard-write, clipboard-read) + * + * @example ['camera', 'microphone', 'geolocation'] + */ + permissions?: string[] } export interface ModuleVNodeView { diff --git a/packages/devtools-ui-kit/package.json b/packages/devtools-ui-kit/package.json index c8edc67c4e..5045b33829 100644 --- a/packages/devtools-ui-kit/package.json +++ b/packages/devtools-ui-kit/package.json @@ -1,7 +1,7 @@ { "name": "@nuxt/devtools-ui-kit", "type": "module", - "version": "3.1.0", + "version": "3.1.1", "license": "MIT", "homepage": "https://devtools.nuxt.com/module/ui-kit", "repository": { diff --git a/packages/devtools-ui-kit/src/components/NDarkToggle.vue b/packages/devtools-ui-kit/src/components/NDarkToggle.vue index 2b9086b345..3ff5338685 100644 --- a/packages/devtools-ui-kit/src/components/NDarkToggle.vue +++ b/packages/devtools-ui-kit/src/components/NDarkToggle.vue @@ -55,6 +55,7 @@ function toggle(event?: MouseEvent) { { duration: 400, easing: 'ease-in', + fill: 'forwards', pseudoElement: isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)', diff --git a/packages/devtools-wizard/package.json b/packages/devtools-wizard/package.json index 097d425b04..fd90de778c 100644 --- a/packages/devtools-wizard/package.json +++ b/packages/devtools-wizard/package.json @@ -1,7 +1,7 @@ { "name": "@nuxt/devtools-wizard", "type": "module", - "version": "3.1.0", + "version": "3.1.1", "description": "CLI Wizard to toggle Nuxt DevTools", "license": "MIT", "homepage": "https://devtools.nuxt.com", diff --git a/packages/devtools/client/components/IframeView.vue b/packages/devtools/client/components/IframeView.vue index 1ad1513238..b9d87d6951 100644 --- a/packages/devtools/client/components/IframeView.vue +++ b/packages/devtools/client/components/IframeView.vue @@ -23,7 +23,7 @@ const box = reactive(useElementBounding(anchor)) onMounted(() => { const view = props.tab.view as ModuleIframeView const isPersistent = view.persistent !== false - const allowedPermissions = ['clipboard-write', 'clipboard-read'] + const allowedPermissions = ['clipboard-write', 'clipboard-read', ...(view.permissions || [])] if (iframeCacheMap.get(key.value) && isPersistent) { iframeEl.value = iframeCacheMap.get(key.value)! diff --git a/packages/devtools/package.json b/packages/devtools/package.json index 8164c56fb4..60cd442dfa 100644 --- a/packages/devtools/package.json +++ b/packages/devtools/package.json @@ -1,7 +1,7 @@ { "name": "@nuxt/devtools", "type": "module", - "version": "3.1.0", + "version": "3.1.1", "description": "The Nuxt DevTools gives you insights and transparency about your Nuxt App.", "license": "MIT", "homepage": "https://devtools.nuxt.com", diff --git a/packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.vue b/packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.vue index 583a9a05c7..f1fa985d94 100644 --- a/packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.vue +++ b/packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.vue @@ -78,7 +78,7 @@ async function openInEditor() {