Skip to content

Latest commit

 

History

History
50 lines (36 loc) · 1.55 KB

8.nuxt-island.md

File metadata and controls

50 lines (36 loc) · 1.55 KB
Raw
title description
<NuxtClientFallback>
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 slots are 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 if NuxtIsland fails to fetch the component.