Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a49ce7f
commit 586e1ba
Showing
2 changed files
with
50 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
--- | ||
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.componentsIsland` 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.componentsIsland` 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. |
File renamed without changes.