<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
- тип:
- error:
- описание: генерируется, когда при вызове
NuxtIsland
не удается получить новый остров.
- параметры: