Изучите Nuxt с коллекцией из 100+ советов!

<NuxtIsland>

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

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

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

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

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

  • name : Название компонента для рендеринга.
    • тип: string
    • обязательный
  • lazy: Делает компонент неблокирующим.
    • тип: boolean
    • по умолчанию: false
  • props: Входные параметры, которые отправляются компоненту для рендеринга.
    • тип: Record<string, any>
  • source: Удаленный источник, который вызывает остров для рендеринга.
    • тип: string
  • dangerouslyLoadClientComponents: Требуется для загрузки компонентов из удаленного источника.
    • тип: boolean
    • по умолчанию: false
Удаленным островам необходимо, чтобы experimental.componentIslands были 'local+remote' в вашем nuxt.config. Настоятельно не рекомендуется включать dangerouslyLoadClientComponents, так как вы не можете доверять javascript удаленного сервера.

Слоты

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

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

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

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

Ref

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

События

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