feat(nuxt): allow keeping fallback for NuxtClientFallback

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`
+- **strategy**: Specify a strategy to adopt once in client-side. By default it tries to render the slot if it fails in client-side but your can choose to keep the fallback content by setting this prop to `keep-fallback`
+  - **type**: `string`
+  - **default**: `default`
 
 ```vue
   <template>

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

@@ -21,6 +21,10 @@ export default defineComponent({
     },
     placeholderTag: {
       type: String
+    },
+    strategy: {
+      type: String as () => 'default'|'keep-fallback',
+      default: () => 'default'
     }
   },
   emits: ['ssr-error'],
@@ -33,7 +37,11 @@ export default defineComponent({
     }
 
     return () => {
-      if (mounted.value) { return ctx.slots.default?.() }
+      if (mounted.value) {
+        if (!ssrFailed.value || (ssrFailed.value && props.strategy === 'default')) {
+          return ctx.slots.default?.()
+        }
+      }
       if (ssrFailed.value) {
         const slot = ctx.slots.placeholder || ctx.slots.fallback
         if (slot) { return slot() }

packages/nuxt/src/app/components/client-fallback.server.ts

@@ -23,6 +23,10 @@ const NuxtClientFallbackServer = defineComponent({
     },
     placeholderTag: {
       type: String
+    },
+    strategy: {
+      type: String as () => 'default'|'keep-fallback',
+      default: () => 'default'
     }
   },
   emits: ['ssr-error'],

test/basic.test.ts

@@ -334,7 +334,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)
     await page.close()
   })
 })

test/fixtures/basic/pages/client-fallback.vue

@@ -38,6 +38,16 @@
       <ClientFallbackStatefulSetup />
       <ClientFallbackNonStatefulSetup />
       <ClientFallbackNonStateful />
+      <NuxtClientFallback strategy="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