feat(nuxt): allow keeping fallback for NuxtClientFallback (#20336)

nuxt · May 14, 2023 · 603e7e7 · 603e7e7
1 parent ebbda2c
commit 603e7e7
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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