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

51 lines
1.6 KiB
Markdown
Raw Normal View History

2023-08-02 07:31:22 +00:00
---
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`.
2023-08-02 07:31:22 +00:00
::
::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`.
2023-08-02 07:31:22 +00:00
::
## `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.