From 603e7e7fb1c0f2da36a758db92f6cca84fee68bb Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Sun, 14 May 2023 23:22:54 +0200
Subject: [PATCH] feat(nuxt): allow keeping fallback for `NuxtClientFallback`
 (#20336)

---
 .../2.components/1.nuxt-client-fallback.md      |  3 +++
 .../app/components/client-fallback.client.ts    | 17 +++++++++++------
 .../app/components/client-fallback.server.ts    |  4 ++++
 test/basic.test.ts                              |  2 ++
 test/fixtures/basic/pages/client-fallback.vue   | 10 ++++++++++
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/docs/3.api/2.components/1.nuxt-client-fallback.md b/docs/3.api/2.components/1.nuxt-client-fallback.md
index 1707e139ef7b..4abdc0d4970a 100644
--- a/docs/3.api/2.components/1.nuxt-client-fallback.md
+++ b/docs/3.api/2.components/1.nuxt-client-fallback.md
@@ -30,6 +30,9 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `div`
 - **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
   - **type**: `string`
+- **keepFallback**: Keep the fallback content if it failed to render server-side.
+  - **type**: `boolean`
+  - **default**: `false`
 
 ```vue
   <template>
diff --git a/packages/nuxt/src/app/components/client-fallback.client.ts b/packages/nuxt/src/app/components/client-fallback.client.ts
index 94605f7c0194..f0a14d65ecac 100644
--- a/packages/nuxt/src/app/components/client-fallback.client.ts
+++ b/packages/nuxt/src/app/components/client-fallback.client.ts
@@ -21,6 +21,10 @@ export default defineComponent({
     },
     placeholderTag: {
       type: String
+    },
+    keepFallback: {
+      type: Boolean,
+      default: () => false
     }
   },
   emits: ['ssr-error'],
@@ -33,13 +37,14 @@ export default defineComponent({
     }
 
     return () => {
-      if (mounted.value) { return ctx.slots.default?.() }
       if (ssrFailed.value) {
-        const slot = ctx.slots.placeholder || ctx.slots.fallback
-        if (slot) { return slot() }
-        const fallbackStr = props.placeholder || props.fallback
-        const fallbackTag = props.placeholderTag || props.fallbackTag
-        return createElementBlock(fallbackTag, null, fallbackStr)
+        if (!mounted.value || props.keepFallback) {
+          const slot = ctx.slots.placeholder || ctx.slots.fallback
+          if (slot) { return slot() }
+          const fallbackStr = props.placeholder || props.fallback
+          const fallbackTag = props.placeholderTag || props.fallbackTag
+          return createElementBlock(fallbackTag, null, fallbackStr)
+        }
       }
       return ctx.slots.default?.()
     }
diff --git a/packages/nuxt/src/app/components/client-fallback.server.ts b/packages/nuxt/src/app/components/client-fallback.server.ts
index 14bde96f4072..3f30f32b5f40 100644
--- a/packages/nuxt/src/app/components/client-fallback.server.ts
+++ b/packages/nuxt/src/app/components/client-fallback.server.ts
@@ -23,6 +23,10 @@ const NuxtClientFallbackServer = defineComponent({
     },
     placeholderTag: {
       type: String
+    },
+    keepFallback: {
+      type: Boolean,
+      default: () => false
     }
   },
   emits: ['ssr-error'],
diff --git a/test/basic.test.ts b/test/basic.test.ts
index cc1c913fd40b..552f9249fc75 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -345,6 +345,8 @@ describe('pages', () => {
     // ensure components reactivity once mounted
     await page.locator('#increment-count').click()
     expect(await page.locator('#sugar-counter').innerHTML()).toContain('Sugar Counter 12 x 1 = 12')
+    // keep-fallback strategy
+    expect(await page.locator('#keep-fallback').all()).toHaveLength(1)
     // #20833
     expect(await page.locator('body').innerHTML()).not.toContain('Hello world !')
     await page.close()
diff --git a/test/fixtures/basic/pages/client-fallback.vue b/test/fixtures/basic/pages/client-fallback.vue
index c2b0fce213b5..9b4d7c5db830 100644
--- a/test/fixtures/basic/pages/client-fallback.vue
+++ b/test/fixtures/basic/pages/client-fallback.vue
@@ -38,6 +38,16 @@
       <ClientFallbackStatefulSetup />
       <ClientFallbackNonStatefulSetup />
       <ClientFallbackNonStateful />
+      <NuxtClientFallback keep-fallback>
+        <div>
+          <BreakInSetup />
+        </div>
+        <template #fallback>
+          <div id="keep-fallback">
+            keep fallback in client
+          </div>
+        </template>
+      </NuxtClientFallback>
     </div>
     <button id="increment-count" @click="multiplier++">
       increment count