<NuxtIsland> · Компоненты Nuxt

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

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

Глобальные стили вашего приложения будут отправлены вместе с ответом.

Серверные компоненты используют <NuxtIsland> под капотом

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

name : Название компонента для рендеринга.
- тип: string
- обязательный
lazy: Делает компонент неблокирующим.
- тип: boolean
- по умолчанию: false
props: Входные параметры, которые отправляются компоненту для рендеринга.
- тип: Record<string, any>
source: Удаленный источник, который вызывает остров для рендеринга.
- тип: string
dangerouslyLoadClientComponents: Требуется для загрузки компонентов из удаленного источника.
- тип: boolean
- по умолчанию: false

Удаленным островам необходимо, чтобы experimental.componentIslands были 'local+remote' в вашем nuxt.config. Настоятельно не рекомендуется включать dangerouslyLoadClientComponents, так как вы не можете доверять javascript удаленного сервера.

По умолчанию, компоненты-острова сканируются из директории ~/components/islands/. Таким образом, компонент ~/components/islands/MyIsland.vue может быть отрендерен с помощью <NuxtIsland name="MyIsland" />.

Слоты

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

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

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

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

Ref

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

События

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

Компонент <NuxtWelcome> приветствует пользователей в новых проектах, созданных на основе starter-шаблона.

Nuxt предоставляет компонент <NuxtImg> для автоматической оптимизации изображений.