<NuxtClientFallback>

Исходный код (клиент)Исходный код (сервер)
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: при true резервный вариант сохраняется, если его не удалось отрендерить на сервере.
    • тип: boolean
    • по умолчанию: false
Свойства placeholder и fallback выводят содержимое как необработанный HTML. Не передавайте в них недоверенный пользовательский ввод — это может привести к XSS. Для динамического контента с корректным экранированием используйте слоты #fallback или #placeholder.
<template>
  <!-- на сервере рендерится <span>Привет, мир</span>, если слот по умолчанию не удаётся отрендерить -->
  <NuxtClientFallback
    fallback-tag="span"
    fallback="Привет, мир"
  >
    <BrokeInSSR />
  </NuxtClientFallback>
</template>

Слоты

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