From fd5a0f8a637da4bccb19b2f54dc10b029aac11c4 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Thu, 22 Sep 2022 19:56:33 +0200
Subject: [PATCH 01/10] fix(nuxt): remove Fragment and use h() to render
 component render

---
 packages/nuxt/src/app/components/client-only.mjs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/app/components/client-only.mjs b/packages/nuxt/src/app/components/client-only.mjs
index 3e0cf41bdd6..fe8722cfb7d 100644
--- a/packages/nuxt/src/app/components/client-only.mjs
+++ b/packages/nuxt/src/app/components/client-only.mjs
@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent, createElementBlock, h, Fragment } from 'vue'
+import { ref, onMounted, defineComponent, createElementBlock, h } from 'vue'
 
 export default defineComponent({
   name: 'ClientOnly',
@@ -31,7 +31,7 @@ export function createClientOnly (component) {
     // override the component render (non script setup component)
     clone.render = (ctx, ...args) => {
       return ctx.mounted$
-        ? h(Fragment, ctx.$attrs ?? ctx._.attrs, component.render(ctx, ...args))
+        ? h(component.render(ctx, ...args))
         : h('div', ctx.$attrs ?? ctx._.attrs)
     }
   } else if (clone.template) {
@@ -52,8 +52,7 @@ export function createClientOnly (component) {
           ? { ...setupState, mounted$ }
           : (...args) => {
               return mounted$.value
-                // use Fragment to avoid oldChildren is null issue
-                ? h(Fragment, ctx.attrs, setupState(...args))
+                ? h(setupState(...args))
                 : h('div', ctx.attrs)
             }
       })

From 56812d0d8b892bb28640449a2a8e76cafc784539 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Thu, 22 Sep 2022 23:33:45 +0200
Subject: [PATCH 02/10] fix(nuxt): use createElementBlock if children is null
 or string

---
 packages/nuxt/src/app/components/client-only.mjs | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/app/components/client-only.mjs b/packages/nuxt/src/app/components/client-only.mjs
index fe8722cfb7d..14b44024e0c 100644
--- a/packages/nuxt/src/app/components/client-only.mjs
+++ b/packages/nuxt/src/app/components/client-only.mjs
@@ -51,9 +51,14 @@ export function createClientOnly (component) {
         return typeof setupState !== 'function'
           ? { ...setupState, mounted$ }
           : (...args) => {
-              return mounted$.value
-                ? h(setupState(...args))
-                : h('div', ctx.attrs)
+              if (mounted$.value) {
+                const res = setupState(...args)
+                return (res.children === null || typeof res.children === 'string')
+                  ? createElementBlock(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+                  : h(res)
+              } else {
+                return h('div', ctx.attrs)
+              }
             }
       })
   }

From 4e4757a896ff2b1eb69041b6aaf5abe793eab98c Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 23 Sep 2022 16:17:26 +0200
Subject: [PATCH 03/10] test(basic): reinforce .client components test

---
 test/basic.test.ts                            | 45 +++++++++++++++++++
 .../basic/components/client/MultiRootNode.vue | 10 +++++
 .../components/client/MultiRootNodeScript.vue | 15 +++++++
 .../basic/components/client/NoState.vue       |  3 ++
 .../basic/components/client/Script.client.vue | 39 ++++++++++++++++
 .../components/client/SetupScript.client.vue  | 14 ++++++
 .../client/StringChildStateful.client.vue     | 14 ++++++
 .../StringChildStatefulScript.client.vue      | 18 ++++++++
 .../basic/pages/client-only-components.vue    | 28 +++++++++---
 9 files changed, 180 insertions(+), 6 deletions(-)
 create mode 100644 test/fixtures/basic/components/client/MultiRootNode.vue
 create mode 100644 test/fixtures/basic/components/client/MultiRootNodeScript.vue
 create mode 100644 test/fixtures/basic/components/client/NoState.vue
 create mode 100644 test/fixtures/basic/components/client/Script.client.vue
 create mode 100644 test/fixtures/basic/components/client/SetupScript.client.vue
 create mode 100644 test/fixtures/basic/components/client/StringChildStateful.client.vue
 create mode 100644 test/fixtures/basic/components/client/StringChildStatefulScript.client.vue

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 2fe9c019dba..f1bd5a71189 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -144,6 +144,7 @@ describe('pages', () => {
   })
 
   it('/client-only-components', async () => {
+    // ensure components are not rendered server-side
     const html = await $fetch('/client-only-components')
     expect(html).toContain('<div class="client-only-script" foo="bar">')
     expect(html).toContain('<div class="client-only-script-setup" foo="hello">')
@@ -151,6 +152,50 @@ describe('pages', () => {
     expect(html).not.toContain('Should not be server rendered')
 
     await expectNoClientErrors('/client-only-components')
+
+    const page = await createPage('/client-only-components')
+
+    await page.waitForLoadState('networkidle')
+
+    const hiddenSelectors = [
+      '.string-stateful-should-be-hidden',
+      '.client-script-should-be-hidden',
+      '.string-stateful-script-should-be-hidden'
+    ]
+    const visibleSelectors = [
+      '.string-stateful',
+      '.string-stateful-script',
+      '.client-only-script',
+      '.client-only-script-setup',
+      '.no-state'
+    ]
+    // ensure directive are correctly applied
+    await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isHidden()))
+      .then(results => results.forEach(isHidden => expect(isHidden).toBeTruthy()))
+    // ensure hidden components are still rendered
+    await Promise.all(hiddenSelectors.map(selector => page.locator(selector).innerHTML()))
+      .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe('')))
+
+    // ensure single root node components are rendered once on client (should not be empty)
+    await Promise.all(visibleSelectors.map(selector => page.locator(selector).innerHTML()))
+      .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe('')))
+
+    // ensure multi-root-node is correctly rendered
+    expect(await page.locator('.multi-root-node-count').innerHTML()).toBe('0')
+    expect(await page.locator('.multi-root-node-button').innerHTML()).toBe('add 1 to count')
+    expect(await page.locator('.multi-root-node-script-count').innerHTML()).toBe('0')
+    expect(await page.locator('.multi-root-node-script-button').innerHTML()).toBe('add 1 to count')
+
+    // ensure components reactivity
+    await page.locator('.multi-root-node-button').click()
+    await page.locator('.multi-root-node-script-button').click()
+    await page.locator('.client-only-script button').click()
+    await page.locator('.client-only-script-setup button').click()
+
+    expect(await page.locator('.multi-root-node-count').innerHTML()).toBe('1')
+    expect(await page.locator('.multi-root-node-script-count').innerHTML()).toBe('1')
+    expect(await page.locator('.client-only-script-setup button').innerHTML()).toBe('1')
+    expect(await page.locator('.client-only-script button').innerHTML()).toBe('1')
   })
 })
 
diff --git a/test/fixtures/basic/components/client/MultiRootNode.vue b/test/fixtures/basic/components/client/MultiRootNode.vue
new file mode 100644
index 00000000000..f27a0f92caf
--- /dev/null
+++ b/test/fixtures/basic/components/client/MultiRootNode.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="multi-root-node-count">{{ count }}</div>
+  <button class="multi-root-node-button" @click="add">add 1 to count</button>
+</template>
+
+<script setup>
+const count = ref(0);
+
+const add = () => count.value++;
+</script>
diff --git a/test/fixtures/basic/components/client/MultiRootNodeScript.vue b/test/fixtures/basic/components/client/MultiRootNodeScript.vue
new file mode 100644
index 00000000000..cbc614b48e5
--- /dev/null
+++ b/test/fixtures/basic/components/client/MultiRootNodeScript.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="multi-root-node-script-count">{{ count }}</div>
+  <button class="multi-root-node-script-button" @click="add">add 1 to count</button>
+</template>
+
+<script>
+export default defineNuxtComponent({
+  setup() {
+    const count = ref(0);
+
+    const add = () => count.value++;
+    return { count, add };
+  },
+});
+</script>
diff --git a/test/fixtures/basic/components/client/NoState.vue b/test/fixtures/basic/components/client/NoState.vue
new file mode 100644
index 00000000000..92f3b3e3bec
--- /dev/null
+++ b/test/fixtures/basic/components/client/NoState.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Hello world !</div>
+</template>
diff --git a/test/fixtures/basic/components/client/Script.client.vue b/test/fixtures/basic/components/client/Script.client.vue
new file mode 100644
index 00000000000..b21f8b5c8bf
--- /dev/null
+++ b/test/fixtures/basic/components/client/Script.client.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+export default defineNuxtComponent({
+  name: "ClientScript",
+  props: {
+    foo: {
+      type: String,
+    },
+  },
+  setup() {
+    const count = ref(0);
+    const add = () => count.value++;
+
+    return {
+      count,
+      add,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <div class="client-only-css">client only script component {{ foo }}</div>
+    <button @click="add">{{ count }}</button>
+    <slot name="test" />
+  </div>
+</template>
+
+<style>
+:root {
+  --client-only: "client-only";
+}
+</style>
+
+<style scoped>
+.client-only-css {
+  color: rgb(50, 50, 50);
+}
+</style>
diff --git a/test/fixtures/basic/components/client/SetupScript.client.vue b/test/fixtures/basic/components/client/SetupScript.client.vue
new file mode 100644
index 00000000000..edb9da630f3
--- /dev/null
+++ b/test/fixtures/basic/components/client/SetupScript.client.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{ foo: string }>();
+const count = ref(0);
+const add = () => count.value++;
+</script>
+
+<template>
+  <div>
+    <div>client only script setup component {{ props.foo }}</div>
+    <button @click="add">{{ count }}</button>
+
+    <slot name="test" />
+  </div>
+</template>
diff --git a/test/fixtures/basic/components/client/StringChildStateful.client.vue b/test/fixtures/basic/components/client/StringChildStateful.client.vue
new file mode 100644
index 00000000000..48626719b08
--- /dev/null
+++ b/test/fixtures/basic/components/client/StringChildStateful.client.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const state = ref(0);
+
+const add = () => state.value++;
+
+defineExpose({
+  state,
+  add,
+});
+</script>
+
+<template>
+  <div>Hi i should be rendered {{ state }}</div>
+</template>
diff --git a/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue b/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue
new file mode 100644
index 00000000000..cf083c8cdd2
--- /dev/null
+++ b/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue
@@ -0,0 +1,18 @@
+<script lang="ts">
+export default defineNuxtComponent({
+  setup(_p, ctx) {
+    const state = ref(0);
+
+    const add = () => state.value++;
+
+    ctx.expose({ add, state });
+    return {
+      state,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>Hi i should be rendered {{ state }}</div>
+</template>
diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index f020ea1cfc1..0397d39638c 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -1,18 +1,34 @@
 <template>
   <div>
-    <ClientOnlyScript class="client-only-script" foo="bar" />
-    <ClientOnlySetupScript class="client-only-script-setup" foo="hello">
+    <ClientScript class="client-only-script" foo="bar" />
+    <ClientSetupScript class="client-only-script-setup" foo="hello">
       <template #test>
-        <div class="slot-test">
-          Hello
-        </div>
+        <div class="slot-test">Hello</div>
       </template>
-    </ClientOnlySetupScript>
+    </ClientSetupScript>
     <ClientOnly>
       Should not be server rendered.
       <template #fallback>
         <div>Fallback</div>
       </template>
     </ClientOnly>
+    <!-- ensure multi root node components are correctly rendered (Fragment) -->
+    <ClientMultiRootNode class="multi-root-node" />
+    <ClientMultiRootNodeScript class="multi-root-node-script" />
+    <!-- ensure component with a single single child are correctly rendered -->
+    <ClientStringChildStateful ref="stringStatefulComp" class="string-stateful" />
+    <ClientStringChildStatefulScript class="string-stateful-script" />
+    <!-- ensure directives are correctly passed -->
+    <ClientStringChildStateful v-show="false" class="string-stateful-should-be-hidden" />
+    <ClientSetupScript v-show="false" class="client-script-should-be-hidden" foo="bar" />
+    <ClientStringChildStatefulScript
+      v-show="false"
+      class="string-stateful-script-should-be-hidden"
+    />
+    <ClientNoState class="no-state" />
   </div>
 </template>
+
+<script setup lang="ts">
+const stringStatefulComp = ref(null);
+</script>

From d1be61ec5e3c6299796eef110cc28114e7db0c1d Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 23 Sep 2022 16:18:54 +0200
Subject: [PATCH 04/10] fix(nuxt): use createElementBlock for string child
 components

---
 packages/nuxt/src/app/components/client-only.mjs | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/app/components/client-only.mjs b/packages/nuxt/src/app/components/client-only.mjs
index 14b44024e0c..a40183ff37b 100644
--- a/packages/nuxt/src/app/components/client-only.mjs
+++ b/packages/nuxt/src/app/components/client-only.mjs
@@ -30,9 +30,14 @@ export function createClientOnly (component) {
   if (clone.render) {
     // override the component render (non script setup component)
     clone.render = (ctx, ...args) => {
-      return ctx.mounted$
-        ? h(component.render(ctx, ...args))
-        : h('div', ctx.$attrs ?? ctx._.attrs)
+      if (ctx.mounted$) {
+        const res = component.render(ctx, ...args)
+        return (res.children === null || typeof res.children === 'string')
+          ? createElementBlock(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+          : h(res)
+      } else {
+        return h('div', ctx.attrs)
+      }
     }
   } else if (clone.template) {
     // handle runtime-compiler template

From 569f3d485f6bca223062f171ecdbe8b6aeba1214 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 23 Sep 2022 16:33:01 +0200
Subject: [PATCH 05/10] fix(nuxt): fix attrs

---
 packages/nuxt/src/app/components/client-only.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/app/components/client-only.mjs b/packages/nuxt/src/app/components/client-only.mjs
index a40183ff37b..e787f7f3492 100644
--- a/packages/nuxt/src/app/components/client-only.mjs
+++ b/packages/nuxt/src/app/components/client-only.mjs
@@ -36,7 +36,7 @@ export function createClientOnly (component) {
           ? createElementBlock(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
           : h(res)
       } else {
-        return h('div', ctx.attrs)
+        return h('div', ctx.$attrs ?? ctx._.attrs)
       }
     }
   } else if (clone.template) {

From 7beb94faa5329b0482df1dbe7eb3a408f58772da Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 23 Sep 2022 16:43:37 +0200
Subject: [PATCH 06/10] test: lint + fix dev test + component ref test

---
 test/basic.test.ts                            |  7 ++++
 .../basic/components/client/MultiRootNode.vue | 12 ++++---
 .../components/client/MultiRootNodeScript.vue | 20 ++++++-----
 .../basic/components/client/Script.client.vue | 30 +++++++++-------
 .../components/client/SetupScript.client.vue  | 12 ++++---
 .../client/StringChildStateful.client.vue     |  8 ++---
 .../StringChildStatefulScript.client.vue      | 16 ++++-----
 .../basic/pages/client-only-components.vue    | 36 ++++++++++++++++---
 8 files changed, 96 insertions(+), 45 deletions(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index f1bd5a71189..28df136ddcc 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -196,6 +196,13 @@ describe('pages', () => {
     expect(await page.locator('.multi-root-node-script-count').innerHTML()).toBe('1')
     expect(await page.locator('.client-only-script-setup button').innerHTML()).toBe('1')
     expect(await page.locator('.client-only-script button').innerHTML()).toBe('1')
+
+    // ensure component ref is working and reactive
+    await page.locator('button.test-ref').click()
+    expect(await page.locator('.client-only-script-setup button').innerHTML()).toBe('2')
+    expect(await page.locator('.client-only-script button').innerHTML()).toBe('2')
+    expect(await page.locator('.string-stateful-script').innerHTML()).toBe('1')
+    expect(await page.locator('.string-stateful').innerHTML()).toBe('1')
   })
 })
 
diff --git a/test/fixtures/basic/components/client/MultiRootNode.vue b/test/fixtures/basic/components/client/MultiRootNode.vue
index f27a0f92caf..247ad18db1a 100644
--- a/test/fixtures/basic/components/client/MultiRootNode.vue
+++ b/test/fixtures/basic/components/client/MultiRootNode.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="multi-root-node-count">{{ count }}</div>
-  <button class="multi-root-node-button" @click="add">add 1 to count</button>
+  <div v-bind="$attrs" class="multi-root-node-count">
+    {{ count }}
+  </div>
+  <button class="multi-root-node-button" @click="add">
+    add 1 to count
+  </button>
 </template>
 
 <script setup>
-const count = ref(0);
+const count = ref(0)
 
-const add = () => count.value++;
+const add = () => count.value++
 </script>
diff --git a/test/fixtures/basic/components/client/MultiRootNodeScript.vue b/test/fixtures/basic/components/client/MultiRootNodeScript.vue
index cbc614b48e5..67ed503ca3d 100644
--- a/test/fixtures/basic/components/client/MultiRootNodeScript.vue
+++ b/test/fixtures/basic/components/client/MultiRootNodeScript.vue
@@ -1,15 +1,19 @@
 <template>
-  <div class="multi-root-node-script-count">{{ count }}</div>
-  <button class="multi-root-node-script-button" @click="add">add 1 to count</button>
+  <div v-bind="$attrs" class="multi-root-node-script-count">
+    {{ count }}
+  </div>
+  <button class="multi-root-node-script-button" @click="add">
+    add 1 to count
+  </button>
 </template>
 
 <script>
 export default defineNuxtComponent({
-  setup() {
-    const count = ref(0);
+  setup () {
+    const count = ref(0)
 
-    const add = () => count.value++;
-    return { count, add };
-  },
-});
+    const add = () => count.value++
+    return { count, add }
+  }
+})
 </script>
diff --git a/test/fixtures/basic/components/client/Script.client.vue b/test/fixtures/basic/components/client/Script.client.vue
index b21f8b5c8bf..86767ad9378 100644
--- a/test/fixtures/basic/components/client/Script.client.vue
+++ b/test/fixtures/basic/components/client/Script.client.vue
@@ -1,27 +1,33 @@
 <script lang="ts">
 export default defineNuxtComponent({
-  name: "ClientScript",
+  name: 'ClientScript',
   props: {
     foo: {
-      type: String,
-    },
+      type: String
+    }
   },
-  setup() {
-    const count = ref(0);
-    const add = () => count.value++;
+  setup (_p, ctx) {
+    const count = ref(0)
+    const add = () => count.value++
+
+    ctx.expose({ add })
 
     return {
       count,
-      add,
-    };
-  },
-});
+      add
+    }
+  }
+})
 </script>
 
 <template>
   <div>
-    <div class="client-only-css">client only script component {{ foo }}</div>
-    <button @click="add">{{ count }}</button>
+    <div class="client-only-css">
+      client only script component {{ foo }}
+    </div>
+    <button @click="add">
+      {{ count }}
+    </button>
     <slot name="test" />
   </div>
 </template>
diff --git a/test/fixtures/basic/components/client/SetupScript.client.vue b/test/fixtures/basic/components/client/SetupScript.client.vue
index edb9da630f3..becd6eb01e6 100644
--- a/test/fixtures/basic/components/client/SetupScript.client.vue
+++ b/test/fixtures/basic/components/client/SetupScript.client.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-const props = defineProps<{ foo: string }>();
-const count = ref(0);
-const add = () => count.value++;
+const props = defineProps<{ foo: string }>()
+const count = ref(0)
+const add = () => count.value++
+
+defineExpose({ add })
 </script>
 
 <template>
   <div>
     <div>client only script setup component {{ props.foo }}</div>
-    <button @click="add">{{ count }}</button>
+    <button @click="add">
+      {{ count }}
+    </button>
 
     <slot name="test" />
   </div>
diff --git a/test/fixtures/basic/components/client/StringChildStateful.client.vue b/test/fixtures/basic/components/client/StringChildStateful.client.vue
index 48626719b08..16b39a204a7 100644
--- a/test/fixtures/basic/components/client/StringChildStateful.client.vue
+++ b/test/fixtures/basic/components/client/StringChildStateful.client.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-const state = ref(0);
+const state = ref(0)
 
-const add = () => state.value++;
+const add = () => state.value++
 
 defineExpose({
   state,
-  add,
-});
+  add
+})
 </script>
 
 <template>
diff --git a/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue b/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue
index cf083c8cdd2..b87df7c74da 100644
--- a/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue
+++ b/test/fixtures/basic/components/client/StringChildStatefulScript.client.vue
@@ -1,16 +1,16 @@
 <script lang="ts">
 export default defineNuxtComponent({
-  setup(_p, ctx) {
-    const state = ref(0);
+  setup (_p, ctx) {
+    const state = ref(0)
 
-    const add = () => state.value++;
+    const add = () => state.value++
 
-    ctx.expose({ add, state });
+    ctx.expose({ add, state })
     return {
-      state,
-    };
-  },
-});
+      state
+    }
+  }
+})
 </script>
 
 <template>
diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index 0397d39638c..f43867109ee 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -1,9 +1,15 @@
 <template>
   <div>
-    <ClientScript class="client-only-script" foo="bar" />
-    <ClientSetupScript class="client-only-script-setup" foo="hello">
+    <ClientScript ref="clientScript" class="client-only-script" foo="bar" />
+    <ClientSetupScript
+      ref="clientSetupScript"
+      class="client-only-script-setup"
+      foo="hello"
+    >
       <template #test>
-        <div class="slot-test">Hello</div>
+        <div class="slot-test">
+          Hello
+        </div>
       </template>
     </ClientSetupScript>
     <ClientOnly>
@@ -15,9 +21,13 @@
     <!-- ensure multi root node components are correctly rendered (Fragment) -->
     <ClientMultiRootNode class="multi-root-node" />
     <ClientMultiRootNodeScript class="multi-root-node-script" />
+
     <!-- ensure component with a single single child are correctly rendered -->
     <ClientStringChildStateful ref="stringStatefulComp" class="string-stateful" />
-    <ClientStringChildStatefulScript class="string-stateful-script" />
+    <ClientStringChildStatefulScript
+      ref="stringStatefulScriptComp"
+      class="string-stateful-script"
+    />
     <!-- ensure directives are correctly passed -->
     <ClientStringChildStateful v-show="false" class="string-stateful-should-be-hidden" />
     <ClientSetupScript v-show="false" class="client-script-should-be-hidden" foo="bar" />
@@ -26,9 +36,25 @@
       class="string-stateful-script-should-be-hidden"
     />
     <ClientNoState class="no-state" />
+
+    <button class="test-ref" @click="stringStatefulComp.add">
+      increment count
+    </button>
+    <button class="test-ref" @click="stringStatefulScriptComp.add">
+      increment count
+    </button>
+    <button class="test-ref" @click="clientScript.add">
+      increment count
+    </button>
+    <button class="test-ref" @click="clientSetupScript.add">
+      increment count
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-const stringStatefulComp = ref(null);
+const stringStatefulComp = ref(null)
+const stringStatefulScriptComp = ref(null)
+const clientScript = ref(null)
+const clientSetupScript = ref(null)
 </script>

From f56f329dfb2762ec9fb0c7408543f188d6f0bec4 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 23 Sep 2022 16:57:33 +0200
Subject: [PATCH 07/10] fix(test):  prefer toContain over toBe + typo + split
 locator

---
 test/basic.test.ts                            | 35 ++++++++++---------
 .../basic/pages/client-only-components.vue    | 10 +++---
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 28df136ddcc..d0072df91be 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -169,7 +169,7 @@ describe('pages', () => {
       '.client-only-script-setup',
       '.no-state'
     ]
-    // ensure directive are correctly applied
+    // ensure directives are correctly applied
     await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isHidden()))
       .then(results => results.forEach(isHidden => expect(isHidden).toBeTruthy()))
     // ensure hidden components are still rendered
@@ -181,10 +181,10 @@ describe('pages', () => {
       .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe('')))
 
     // ensure multi-root-node is correctly rendered
-    expect(await page.locator('.multi-root-node-count').innerHTML()).toBe('0')
-    expect(await page.locator('.multi-root-node-button').innerHTML()).toBe('add 1 to count')
-    expect(await page.locator('.multi-root-node-script-count').innerHTML()).toBe('0')
-    expect(await page.locator('.multi-root-node-script-button').innerHTML()).toBe('add 1 to count')
+    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')
+    expect(await page.locator('.multi-root-node-script-count').innerHTML()).toContain('0')
+    expect(await page.locator('.multi-root-node-script-button').innerHTML()).toContain('add 1 to count')
 
     // ensure components reactivity
     await page.locator('.multi-root-node-button').click()
@@ -192,17 +192,20 @@ describe('pages', () => {
     await page.locator('.client-only-script button').click()
     await page.locator('.client-only-script-setup button').click()
 
-    expect(await page.locator('.multi-root-node-count').innerHTML()).toBe('1')
-    expect(await page.locator('.multi-root-node-script-count').innerHTML()).toBe('1')
-    expect(await page.locator('.client-only-script-setup button').innerHTML()).toBe('1')
-    expect(await page.locator('.client-only-script button').innerHTML()).toBe('1')
-
-    // ensure component ref is working and reactive
-    await page.locator('button.test-ref').click()
-    expect(await page.locator('.client-only-script-setup button').innerHTML()).toBe('2')
-    expect(await page.locator('.client-only-script button').innerHTML()).toBe('2')
-    expect(await page.locator('.string-stateful-script').innerHTML()).toBe('1')
-    expect(await page.locator('.string-stateful').innerHTML()).toBe('1')
+    expect(await page.locator('.multi-root-node-count').innerHTML()).toContain('1')
+    expect(await page.locator('.multi-root-node-script-count').innerHTML()).toContain('1')
+    expect(await page.locator('.client-only-script-setup button').innerHTML()).toContain('1')
+    expect(await page.locator('.client-only-script button').innerHTML()).toContain('1')
+
+    // ensure components ref is working and reactive
+    await page.locator('button.test-ref-1').click()
+    await page.locator('button.test-ref-2').click()
+    await page.locator('button.test-ref-3').click()
+    await page.locator('button.test-ref-4').click()
+    expect(await page.locator('.client-only-script-setup button').innerHTML()).toContain('2')
+    expect(await page.locator('.client-only-script button').innerHTML()).toContain('2')
+    expect(await page.locator('.string-stateful-script').innerHTML()).toContain('1')
+    expect(await page.locator('.string-stateful').innerHTML()).toContain('1')
   })
 })
 
diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index f43867109ee..0fdffe0c52e 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -22,7 +22,7 @@
     <ClientMultiRootNode class="multi-root-node" />
     <ClientMultiRootNodeScript class="multi-root-node-script" />
 
-    <!-- ensure component with a single single child are correctly rendered -->
+    <!-- ensure components with a single single child are correctly rendered -->
     <ClientStringChildStateful ref="stringStatefulComp" class="string-stateful" />
     <ClientStringChildStatefulScript
       ref="stringStatefulScriptComp"
@@ -37,16 +37,16 @@
     />
     <ClientNoState class="no-state" />
 
-    <button class="test-ref" @click="stringStatefulComp.add">
+    <button class="test-ref-1" @click="stringStatefulComp.add">
       increment count
     </button>
-    <button class="test-ref" @click="stringStatefulScriptComp.add">
+    <button class="test-ref-2" @click="stringStatefulScriptComp.add">
       increment count
     </button>
-    <button class="test-ref" @click="clientScript.add">
+    <button class="test-ref-3" @click="clientScript.add">
       increment count
     </button>
-    <button class="test-ref" @click="clientSetupScript.add">
+    <button class="test-ref-4" @click="clientSetupScript.add">
       increment count
     </button>
   </div>

From 5c1dd06c6983d0876fb30f6e0a620089145865da Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 23 Sep 2022 16:17:52 +0100
Subject: [PATCH 08/10] docs: add extra comment

---
 test/basic.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index d0072df91be..da126524db8 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -144,11 +144,12 @@ describe('pages', () => {
   })
 
   it('/client-only-components', async () => {
-    // ensure components are not rendered server-side
     const html = await $fetch('/client-only-components')
+    // ensure fallbacks with classes and arbitrary attributes are rendered
     expect(html).toContain('<div class="client-only-script" foo="bar">')
     expect(html).toContain('<div class="client-only-script-setup" foo="hello">')
     expect(html).toContain('<div>Fallback</div>')
+    // ensure components are not rendered server-side
     expect(html).not.toContain('Should not be server rendered')
 
     await expectNoClientErrors('/client-only-components')

From 11f034ad07126539ac9ef029888261c1c710889e Mon Sep 17 00:00:00 2001
From: "jhuang@hsk-partners.com" <jhuang@hsk-partners.com>
Date: Mon, 26 Sep 2022 12:10:04 +0200
Subject: [PATCH 09/10] test: add .client suffix name

---
 .../client/{MultiRootNode.vue => MultiRootNode.client.vue}        | 0
 .../{MultiRootNodeScript.vue => MultiRootNodeScript.client.vue}   | 0
 .../basic/components/client/{NoState.vue => NoState.client.vue}   | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename test/fixtures/basic/components/client/{MultiRootNode.vue => MultiRootNode.client.vue} (100%)
 rename test/fixtures/basic/components/client/{MultiRootNodeScript.vue => MultiRootNodeScript.client.vue} (100%)
 rename test/fixtures/basic/components/client/{NoState.vue => NoState.client.vue} (100%)

diff --git a/test/fixtures/basic/components/client/MultiRootNode.vue b/test/fixtures/basic/components/client/MultiRootNode.client.vue
similarity index 100%
rename from test/fixtures/basic/components/client/MultiRootNode.vue
rename to test/fixtures/basic/components/client/MultiRootNode.client.vue
diff --git a/test/fixtures/basic/components/client/MultiRootNodeScript.vue b/test/fixtures/basic/components/client/MultiRootNodeScript.client.vue
similarity index 100%
rename from test/fixtures/basic/components/client/MultiRootNodeScript.vue
rename to test/fixtures/basic/components/client/MultiRootNodeScript.client.vue
diff --git a/test/fixtures/basic/components/client/NoState.vue b/test/fixtures/basic/components/client/NoState.client.vue
similarity index 100%
rename from test/fixtures/basic/components/client/NoState.vue
rename to test/fixtures/basic/components/client/NoState.client.vue

From 8d8f03397f400a286c174ad443439c598950432d Mon Sep 17 00:00:00 2001
From: "jhuang@hsk-partners.com" <jhuang@hsk-partners.com>
Date: Mon, 26 Sep 2022 12:16:04 +0200
Subject: [PATCH 10/10] fix: use createElementVNode + reinforce tests

---
 packages/nuxt/src/app/components/client-only.mjs  |  6 +++---
 test/basic.test.ts                                |  8 +++++++-
 .../basic/pages/client-only-components.vue        | 15 +++++++++++----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/nuxt/src/app/components/client-only.mjs b/packages/nuxt/src/app/components/client-only.mjs
index e787f7f3492..e6530f74298 100644
--- a/packages/nuxt/src/app/components/client-only.mjs
+++ b/packages/nuxt/src/app/components/client-only.mjs
@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent, createElementBlock, h } from 'vue'
+import { ref, onMounted, defineComponent, createElementBlock, h, createElementVNode } from 'vue'
 
 export default defineComponent({
   name: 'ClientOnly',
@@ -33,7 +33,7 @@ export function createClientOnly (component) {
       if (ctx.mounted$) {
         const res = component.render(ctx, ...args)
         return (res.children === null || typeof res.children === 'string')
-          ? createElementBlock(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+          ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
           : h(res)
       } else {
         return h('div', ctx.$attrs ?? ctx._.attrs)
@@ -59,7 +59,7 @@ export function createClientOnly (component) {
               if (mounted$.value) {
                 const res = setupState(...args)
                 return (res.children === null || typeof res.children === 'string')
-                  ? createElementBlock(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+                  ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
                   : h(res)
               } else {
                 return h('div', ctx.attrs)
diff --git a/test/basic.test.ts b/test/basic.test.ts
index da126524db8..cf143ddfe76 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -161,7 +161,8 @@ describe('pages', () => {
     const hiddenSelectors = [
       '.string-stateful-should-be-hidden',
       '.client-script-should-be-hidden',
-      '.string-stateful-script-should-be-hidden'
+      '.string-stateful-script-should-be-hidden',
+      '.no-state-hidden'
     ]
     const visibleSelectors = [
       '.string-stateful',
@@ -207,6 +208,11 @@ describe('pages', () => {
     expect(await page.locator('.client-only-script button').innerHTML()).toContain('2')
     expect(await page.locator('.string-stateful-script').innerHTML()).toContain('1')
     expect(await page.locator('.string-stateful').innerHTML()).toContain('1')
+
+    // ensure directives are reactive
+    await page.locator('button#show-all').click()
+    await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isVisible()))
+      .then(results => results.forEach(isVisible => expect(isVisible).toBeTruthy()))
   })
 })
 
diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index 0fdffe0c52e..e5e1094a92e 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -28,14 +28,15 @@
       ref="stringStatefulScriptComp"
       class="string-stateful-script"
     />
+    <ClientNoState class="no-state" />
     <!-- ensure directives are correctly passed -->
-    <ClientStringChildStateful v-show="false" class="string-stateful-should-be-hidden" />
-    <ClientSetupScript v-show="false" class="client-script-should-be-hidden" foo="bar" />
+    <ClientStringChildStateful v-show="show" class="string-stateful-should-be-hidden" />
+    <ClientSetupScript v-show="show" class="client-script-should-be-hidden" foo="bar" />
     <ClientStringChildStatefulScript
-      v-show="false"
+      v-show="show"
       class="string-stateful-script-should-be-hidden"
     />
-    <ClientNoState class="no-state" />
+    <ClientNoState v-show="show" class="no-state-hidden" />
 
     <button class="test-ref-1" @click="stringStatefulComp.add">
       increment count
@@ -49,6 +50,10 @@
     <button class="test-ref-4" @click="clientSetupScript.add">
       increment count
     </button>
+
+    <button id="show-all" @click="show = true">
+      Show all
+    </button>
   </div>
 </template>
 
@@ -57,4 +62,6 @@ const stringStatefulComp = ref(null)
 const stringStatefulScriptComp = ref(null)
 const clientScript = ref(null)
 const clientSetupScript = ref(null)
+
+const show = ref(false)
 </script>