fix(nuxt): preserve instance.attrs in client-only components (#25381)

packages/nuxt/src/app/components/client-only.ts

@@ -55,15 +55,18 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
   clone.setup = (props, ctx) => {
     const instance = getCurrentInstance()!
 
-    const attrs = instance.attrs
+    const attrs = { ...instance.attrs }
+
     // remove existing directives during hydration
     const directives = extractDirectives(instance)
     // prevent attrs inheritance since a staticVNode is rendered before hydration
-    instance.attrs = {}
+    for(const key in attrs) {
+      delete instance.attrs[key]
+    }
     const mounted$ = ref(false)
 
     onMounted(() => {
-      instance.attrs = attrs
+      Object.assign(instance.attrs, attrs)
       instance.vnode.dirs = directives
       mounted$.value = true
     })

test/nuxt/client.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import type { ComponentOptions } from 'vue'
+import { defineComponent, h, toDisplayString, useAttrs } from 'vue'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { createClientOnly } from '../../packages/nuxt/src/app/components/client-only'
+
+const Client = defineComponent({
+  name: 'TestClient',
+  setup () {
+    const attrs = useAttrs()
+    return () => h('div', {}, toDisplayString(attrs))
+  }
+})
+
+describe('createClient attribute inheritance', () => {
+  it('should retrieve attributes with useAttrs()', async () => {
+    const wrapper = await mountSuspended(createClientOnly(Client as ComponentOptions), {
+      attrs: {
+        id: 'client'
+      }
+    })
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      "<div id="client">{
+        "id": "client"
+        }</div>"
+    `)
+  })
+})