<NuxtIsland>

Исходный код
Nuxt предоставляет компонент <NuxtIsland> для рендеринга неинтерактивного компонента без использования клиентского JS.

При рендеринге островного компонента его содержимое является статичным, поэтому JS не загружается на стороне клиента.

Изменение входных параметров островного компонента запускает повторную загрузку островного компонента для его повторного ререндера.

Глобальные стили вашего приложения будут отправлены вместе с ответом.
Серверные компоненты под капотом используют <NuxtIsland>.

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

  • name : Название компонента для рендеринга.
    • тип: string
    • обязательный
  • lazy: Делает компонент неблокирующим.
    • тип: boolean
    • по умолчанию: false
  • props: Входные параметры, которые отправляются компоненту для рендеринга.
    • тип: Record<string, any>
  • source: удалённый источник, который вызывает остров для рендеринга.
    • тип: string
  • dangerouslyLoadClientComponents: требуется для загрузки компонентов из удалённого источника.
    • тип: boolean
    • по умолчанию: false
Удалённым островам необходимо, чтобы в nuxt.config для experimental.componentIslands было задано значение 'local+remote'.
Использование входного параметра source для рендеринга контента с удалённого сервера по своей сути небезопасно: вы полностью доверяете этому серверу безопасный HTML, который будет вставлен в приложение.Это сопоставимо с v-html для внешнего контента: удалённый сервер может подставить произвольный HTML, в том числе вредоносный. Используйте source только для серверов, которым вы полностью доверяете и которыми управляете.Параметр dangerouslyLoadClientComponents задаёт дополнительный уровень риска: загружать и выполнять клиентские компоненты из удалённого источника. Даже при dangerouslyLoadClientComponents: false (по умолчанию) вы по-прежнему доверяете HTML, который отдаёт удалённый сервер.
Входные параметры компонента и контекст передаются в GET-запросе как строка запроса для возможности кэширования. Параметры запроса могут попадать в логи сервера, CDN и заголовок HTTP Referer.
По умолчанию компоненты-острова собираются из каталога ~/components/islands/. Например, ~/components/islands/MyIsland.vue можно отрендерить как <NuxtIsland name="MyIsland" />.

Слоты

Слоты могут быть переданы островному компоненту, если они объявлены.

Каждый слот является интерактивным, поскольку его предоставляет родительский компонент.

Некоторые слоты зарезервированы для NuxtIsland для особых кейсов.

  • #fallback: Укажите содержимое, которое будет отрендерено перед загрузкой острова (если компонент ленив) или если NuxtIsland не сможет получить компонент.

Ref

  • refresh()
    • тип: () => Promise<void>
    • описание: принудительная повторная загрузка серверного компонента.

События

  • error
    • параметры:
      • error:
        • тип: unknown
    • описание: генерируется, когда при вызове NuxtIsland не удаётся получить новый остров.