From 238ec43117aa3bdb674a6ba3796c77641a763f13 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Tue, 4 Aug 2026 01:58:01 +0000
Subject: [PATCH 1/2] fix(devtools): prevent StateEditor from freezing the page
 on live state

The State/Payload and App Config editors deep-synced the live reactive
state back into itself under a { deep: true } watcher. For any state
containing an array (or nested object), each sync produced a fresh
identity that re-triggered the watcher, causing an unbounded reactivity
loop that froze the whole page whenever those tabs were shown.

Snapshot the state into a detached proxy instead of mutating it, and
drive updates off the existing revision signal rather than a deep
watcher over the (potentially huge) state object.

Closes #972
---
 .../client/components/StateEditor.vue         | 60 ++++++++-----------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index be37a99730..a2f10512e4 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { watchPausable } from '@vueuse/core'
-import { useVModel } from '@vueuse/core'
+import { useVModel, watchDebounced } from '@vueuse/core'
 import JsonEditorVue from 'json-editor-vue'
-import { nextTick, onMounted, shallowRef, watch } from 'vue'
+import { computed, onMounted, shallowRef } from 'vue'
 import { getColorMode } from '~/composables/client'
 
 const props = defineProps<{
@@ -22,16 +21,28 @@ const colorMode = getColorMode()
 const proxy = shallowRef()
 const error = shallowRef()
 
+// A named editor is collapsible; only the visible ones need a fresh snapshot.
+const isVisible = computed(() => !props.name || !!isOpen.value)
+
 function isPrimitive(value: any): boolean {
   return ['number', 'bigint', 'string', 'boolean'].includes(typeof value)
 }
 
+// Produce a plain, non-reactive snapshot of the state for the JSON editor.
+//
+// This must NEVER mutate `props.state`: it is the live reactive Nuxt payload /
+// app config / `useState` data. The previous implementation deep-synced the
+// state back into itself under a `{ deep: true }` watcher, so any array or
+// nested object endlessly re-triggered the watcher and froze the whole page
+// (nuxt/devtools#972). Re-cloning into a detached `proxy` avoids that entirely.
 function clone() {
   error.value = undefined
+  if (!isVisible.value)
+    return
   try {
     proxy.value = isPrimitive(props.state)
       ? props.state
-      : JSON.parse(JSON.stringify(props.state || {}))
+      : JSON.parse(JSON.stringify(props.state ?? {}))
   }
   catch (e) {
     console.error(e)
@@ -39,39 +50,20 @@ function clone() {
   }
 }
 
-let watcher: ReturnType<typeof watchPausable> | undefined
-
-onMounted(() => {
-  clone()
-
-  watch(
-    () => [props.revision, props.state],
-    ([_, state]) => {
-      if (!isPrimitive(state))
-        deepSync(state, props.state)
-      else
-        proxy.value = props.state
-    },
-    { deep: true },
-  )
-})
+onMounted(clone)
 
-function deepSync(from: any, to: any) {
-  for (const key in from) {
-    if (Array.isArray(from[key]))
-      to[key] = from[key].slice()
-    else if (typeof from[key] === 'object' && from[key] !== null)
-      deepSync(from[key], to[key])
-    else
-      to[key] = from[key]
-  }
-}
+// `revision` is bumped by DevTools whenever host reactivity updates, so it is a
+// sufficient change signal — we don't need (and must not use) a deep watcher on
+// the potentially huge state object. Debounced to avoid thrashing on rapid
+// updates.
+watchDebounced(
+  () => [props.revision, props.state, isVisible.value],
+  clone,
+  { debounce: 100, maxWait: 500 },
+)
 
-async function refresh() {
-  watcher?.pause()
+function refresh() {
   clone()
-  await nextTick()
-  watcher?.resume()
 }
 </script>
 

From c0feb3fed04ccdbcbc45d512df8d815dcf4d4852 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Tue, 4 Aug 2026 03:04:30 +0000
Subject: [PATCH 2/2] refactor(devtools): use structured-clone-es for
 StateEditor snapshots

Replace JSON.parse(JSON.stringify()) with structured-clone-es, which
tolerates circular references, preserves richer types (Map/Set/Date),
and drops functions/symbols via { lossy: true } instead of throwing.
---
 packages/devtools/client/components/StateEditor.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index a2f10512e4..c0af5ffbe7 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useVModel, watchDebounced } from '@vueuse/core'
 import JsonEditorVue from 'json-editor-vue'
+import { structuredClone } from 'structured-clone-es'
 import { computed, onMounted, shallowRef } from 'vue'
 import { getColorMode } from '~/composables/client'
 
@@ -35,6 +36,11 @@ function isPrimitive(value: any): boolean {
 // state back into itself under a `{ deep: true }` watcher, so any array or
 // nested object endlessly re-triggered the watcher and froze the whole page
 // (nuxt/devtools#972). Re-cloning into a detached `proxy` avoids that entirely.
+//
+// `structured-clone-es` is used instead of `JSON.parse(JSON.stringify())`: it
+// detaches from Vue reactivity, tolerates circular references (rather than
+// throwing), and preserves richer types (Map/Set/Date/…). `lossy: true` drops
+// functions/symbols instead of throwing on them.
 function clone() {
   error.value = undefined
   if (!isVisible.value)
@@ -42,7 +48,7 @@ function clone() {
   try {
     proxy.value = isPrimitive(props.state)
       ? props.state
-      : JSON.parse(JSON.stringify(props.state ?? {}))
+      : structuredClone(props.state ?? {}, { lossy: true })
   }
   catch (e) {
     console.error(e)