Nuxt/docs/3.api/1.components/8.nuxt-island.md

53 lines
1.8 KiB
Markdown
Raw Normal View History

2023-08-02 07:31:22 +00:00
---
title: "<NuxtIsland>"
description: "Nuxt provides the <NuxtIsland> component to render a non-interactive component without any client JS."
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-island.ts
size: xs
2023-08-02 07:31:22 +00:00
---
When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side.
2023-08-02 07:31:22 +00:00
Changing the island component props triggers a refetch of the island component to re-render it again.
::read-more{to="/docs/guide/going-further/experimental-features#componentislands" icon="i-ph-star-duotone"}
This component is experimental and in order to use it you must enable the `experimental.componentIslands` option in your `nuxt.config`.
2023-08-02 07:31:22 +00:00
::
::callout
Global styles of your application are sent with the response.
2023-08-02 07:31:22 +00:00
::
::callout
2023-08-02 07:31:22 +00:00
Server only components use `<NuxtIsland>` under the hood
::
## Props
- `name` : Name of the component to render.
2023-08-02 07:31:22 +00:00
- **type**: `string`
- **required**
- `lazy`: Make the component non-blocking.
2023-08-02 07:31:22 +00:00
- **type**: `boolean`
- **default**: `false`
- `props`: Props to send to the component to render.
2023-08-02 07:31:22 +00:00
- **type**: `Record<string, any>`
- `source`: Remote source to call the island to render.
2023-08-02 07:31:22 +00:00
- **type**: `string`
::callout{color="blue" icon="i-ph-info-duotone"}
Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
2023-08-02 07:31:22 +00:00
::
## Slots
2023-08-02 07:31:22 +00:00
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.