fix(nuxt): add key to .client component placeholders (#20093)

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

@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent, createElementBlock, h, createElementVNode } from 'vue'
+import { mergeProps, ref, onMounted, defineComponent, createElementBlock, h, createElementVNode } from 'vue'
 
 export default defineComponent({
   name: 'ClientOnly',
@@ -37,7 +37,7 @@ export function createClientOnly (component) {
           ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
           : h(res)
       } else {
-        return h('div', ctx.$attrs ?? ctx._.attrs)
+        return h('div', mergeProps(ctx.$attrs ?? ctx._.attrs, { key: 'placeholder-key' }))
       }
     }
   } else if (clone.template) {
@@ -63,7 +63,7 @@ export function createClientOnly (component) {
                   ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
                   : h(res)
               } else {
-                return h('div', ctx.attrs)
+                return h('div', mergeProps(ctx.attrs, { key: 'placeholder-key' }))
               }
             }
       })

test/basic.test.ts

@@ -229,6 +229,7 @@ describe('pages', () => {
       '.client-only-script-setup',
       '.no-state'
     ]
+
     // ensure directives are correctly applied
     await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isHidden()))
       .then(results => results.forEach(isHidden => expect(isHidden).toBeTruthy()))
@@ -240,6 +241,9 @@ describe('pages', () => {
     await Promise.all(visibleSelectors.map(selector => page.locator(selector).innerHTML()))
       .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe('')))
 
+    // issue #20061
+    expect(await page.$eval('.client-only-script-setup', e => getComputedStyle(e).backgroundColor)).toBe('rgb(255, 0, 0)')
+
     // ensure multi-root-node is correctly rendered
     expect(await page.locator('.multi-root-node-count').innerHTML()).toContain('0')
     expect(await page.locator('.multi-root-node-button').innerHTML()).toContain('add 1 to count')

test/fixtures/basic/components/client/SetupScript.client.vue

@@ -7,7 +7,7 @@ defineExpose({ add })
 </script>
 
 <template>
-  <div>
+  <div class="bg-red">
     <div>client only script setup component {{ props.foo }}</div>
     <button @click="add">
       {{ count }}
@@ -16,3 +16,9 @@ defineExpose({ add })
     <slot name="test" />
   </div>
 </template>
+
+<style scoped>
+.bg-red{
+  background-color: rgb(255, 0, 0);
+}
+</style>