<NuxtIsland>
Nuxt provides the <NuxtIsland> component to render a non-interactive component without any client JS.
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.
Global styles of your application are sent with the response.
Server only components use
<NuxtIsland> under the hoodProps
name: Name of the component to render.- type:
string - required
- type:
lazy: Make the component non-blocking.- type:
boolean - default:
false
- type:
props: Props to send to the component to render.- type:
Record<string, any>
- type:
source: Remote source to call the island to render.- type:
string
- type:
- dangerouslyLoadClientComponents: Required to load components from a remote source.
- type:
boolean - default:
false
- type:
Remote islands need
experimental.componentIslands to be 'local+remote' in your nuxt.config.
It is strongly discouraged to enable dangerouslyLoadClientComponents as you can't trust a remote server's javascript.By default, component islands are scanned from the
~/components/islands/ directory. So the ~/components/islands/MyIsland.vue component could be rendered with <NuxtIsland name="MyIsland" />.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 ifNuxtIslandfails to fetch the component.
Ref
refresh()- type:
() => Promise<void> - description: force refetch the server component by refetching it.
- type:
Events
error- parameters:
- error:
- type:
unknown
- type:
- error:
- description: emitted when when
NuxtIslandfails to fetch the new island.
- parameters: