<NuxtClientFallback>

Source (client)Source (server)
Компонент <NuxtClientFallback> рендерит контент на клиенте, если дочерний компонент вызвал ошибку при SSR.

Компонент <NuxtClientFallback> рендерит свой контент на клиенте, если любой дочерний компонент вызвал ошибку при SSR.

Компонент экспериментальный. Чтобы использовать его, включите опцию experimental.clientFallback в nuxt.config.
app/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: тег для fallback, если слот не удалось отрендерить на сервере.
    • тип: string
    • по умолчанию: div
  • placeholder | fallback: контент fallback при ошибке рендеринга слота.
    • тип: string
  • keepFallback: оставлять fallback-контент после неудачного SSR.
    • тип: boolean
    • по умолчанию: false
Пропсы placeholder и fallback вставляют контент как сырой HTML. Не передавайте в них непроверенные пользовательские данные — это может привести к XSS. Для динамического контента используйте слоты #fallback или #placeholder.
<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>