<NuxtIsland>

Source
Компонент <NuxtIsland> рендерит неинтерактивный компонент без клиентского JS.

При рендере island-компонента его контент статичен, клиентский JS для него не подгружается.

Изменение пропсов island-компонента вызывает повторную загрузку и перерисовку.

Глобальные стили приложения отправляются вместе с ответом.
Server-only компоненты внутри используют <NuxtIsland>.

Пропсы

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

Слоты

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

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

Часть слотов зарезервирована за NuxtIsland для особых случаев.

  • #fallback: контент до загрузки island (при lazy) или при ошибке загрузки компонента.

Ref

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

События

  • error
    • parameters:
      • error:
        • type: unknown
    • description: вызывается, когда не удаётся загрузить island.