mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-24 22:55:13 +00:00
51 lines
1.6 KiB
Markdown
51 lines
1.6 KiB
Markdown
---
|
|
title: "<NuxtIsland>"
|
|
description: "Nuxt provides `<NuxtIsland>` component to render a non-interactive component without any client JS"
|
|
---
|
|
|
|
# `<NuxtIsland>`
|
|
|
|
Nuxt provide `<NuxtIsland>` to render components only server side.
|
|
|
|
When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side.
|
|
Changing the island component props triggers a refetch of the island component to re-render it again.
|
|
|
|
::alert{type=warning}
|
|
This component is experimental and in order to use it you must enable the `experimental.componentIslands` option in your `nuxt.config`.
|
|
::
|
|
|
|
::alert{type=info}
|
|
Global styles of your application are sent with the response
|
|
::
|
|
|
|
::alert{type=info}
|
|
Server only components use `<NuxtIsland>` under the hood
|
|
::
|
|
|
|
## Props
|
|
|
|
- **name** : Name of the component to render.
|
|
- **type**: `string`
|
|
- **required**
|
|
- **lazy**: Make the component non-blocking.
|
|
- **type**: `boolean`
|
|
- **default**: `false`
|
|
- **props**: Props to send to the component to render.
|
|
- **type**: `Record<string, any>`
|
|
- **source**: Remote source to call the island to render.
|
|
- **type**: `string`
|
|
|
|
::alert{type=warning}
|
|
Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
|
|
::
|
|
|
|
## `Slots`
|
|
|
|
Slots can be passed to an island component if declared.
|
|
|
|
Every slot is interactive since the parent component is the one providing it.
|
|
|
|
Some slots are reserved to `NuxtIsland` for special cases.
|
|
|
|
- **fallback**: Specify the content to be rendered before the island loads (if the component is lazy) or if `NuxtIsland` fails to fetch the component.
|