client-fallback.vue

<template>
  <div>
    Hello World
    <div id="locator-for-playwright">
      <!-- single child -->
      <NuxtClientFallback fallback-tag="span" class="break-in-ssr" fallback="this failed to render">
        <BreakInSetup />
      </NuxtClientFallback>
      <!-- multi child -->
      <NuxtClientFallback>
        <BreakInSetup class="broke-in-ssr" />
        <BreakInSetup />
      </NuxtClientFallback>
      <!-- don't render if one child fails in ssr -->
      <NuxtClientFallback>
        <BreakInSetup />
        <SugarCounter id="sugar-counter" :multiplier="multiplier" />
      </NuxtClientFallback>
      <!-- nested children fails -->
      <NuxtClientFallback>
        <div>
          <BreakInSetup />
        </div>
        <SugarCounter :multiplier="multiplier" />
      </NuxtClientFallback>
      <!-- should be rendered -->
      <NuxtClientFallback fallback-tag="p">
        <FunctionalComponent />
      </NuxtClientFallback>
      <!-- fallback -->
      <NuxtClientFallback>
        <BreakInSetup />
        <template #fallback>
          <div>Hello world !</div>
        </template>
      </NuxtClientFallback>
      <ClientFallbackStateful />
      <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
    </button>
  </div>
</template>

<script setup>
const multiplier = ref(0)
</script>