<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 с удалённого сервера.
Пропсы компонента и контекст передаются в GET-параметрах запроса для возможности кэширования. Параметры могут попадать в логи сервера, CDN и в заголовок HTTP Referer.
По умолчанию island-компоненты ищутся в ~/components/islands/. Например, ~/components/islands/MyIsland.vue рендерится как <NuxtIsland name="MyIsland" />.

Известные ограничения

useId в island- и server-компонентах

Каждый island рендерится в отдельном Vue-приложении на сервере, поэтому счётчик useId Vue перезапускается для каждого island. Id, сгенерированные внутри island, могут совпасть с id других islands на той же странице или с id остального приложения.

Обходной путь: задайте отличный idPrefix для Vue-приложения island из server plugin, используя id контекста island:

plugins/island-id-prefix.server.ts
export default defineNuxtPlugin((nuxtApp) => {
  const islandContext = nuxtApp.ssrContext?.islandContext
  if (islandContext) {
    nuxtApp.vueApp.config.idPrefix = `${islandContext.id}-v`
  }
})
  • Одинаковые islands всё ещё делят одни и те же id. Два экземпляра одного island с одинаковым именем, props и context делят один server render (и запись payload), поэтому их HTML — включая id от useId — идентичен, а id контекста island, используемый как prefix, тот же. В DOM получаются дублирующиеся атрибуты id, что ломает aria-* и связи <label for> между экземплярами. Для этого случая обходного пути пока нет.
  • useId не работает в интерактивных компонентах внутри islands. Компонент, загруженный с атрибутом nuxt-client, рендерится на сервере внутри app island, но гидратируется основным client app, поэтому useId возвращает разные значения на сервере и клиенте, вызывая hydration mismatch.

Слоты

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

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

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

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

Ref

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

События

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