Nuxt mid-level certification launch date announced!
Nuxt предоставляет компонент NuxtClientFallback для отображения его содержимого на клиенте, если какой-либо из его дочерних элементов вызывает ошибку в SSR

Nuxt предоставляет компонент NuxtClientFallback для отображения его содержимого на клиенте, если какой-либо из его дочерних элементов вызывает ошибку в SSR.

Этот компонент является экспериментальным, и для его использования необходимо включить опцию experimental.clientFallback в вашем nuxt.config.
pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- этот компонент будет отображаться на стороне клиента -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

События

  • @ssr-error: Событие генерируется, когда дочерний элемент вызывает ошибку в SSR. Обратите внимание, что это будет запущено только на сервере.
    <template>
      <NuxtClientFallback @ssr-error="logSomeError">
        <!-- ... -->
      </NuxtClientFallback>
    </template>
    

Входные параметры

  • placeholderTag | fallbackTag: Укажите резервный тег, который будет отображаться, если слот не будет отображаться на сервере.
    • тип: string
    • по умолчанию: div
  • placeholder | fallback: Укажите резервный контент, который будет отображаться, если слот не может быть отображен.
    • тип: string
  • keepFallback: Сохраните резервный контент, если его не удалось отобразить на стороне сервера.
    • тип: boolean
    • по умолчанию: false
  <template>
    <!-- рендеринг <span>Hello world</span> на стороне сервера, если слот по умолчанию не справляется с рендерингом -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

Слоты

  • #fallback: укажите контент, который будет отображаться на стороне сервера, если слот не может отобразиться
<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- это будет отображаться на стороне сервера, если слот по умолчанию не будет отображаться в ssr -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>