`<NuxtIsland>`

Renders a server-only component island with no client-side JavaScript.

Since Nuxt 3.1 Spec ↗

Syntax

<NuxtIsland name="MyComponent" :props="{ ... }" />

Parameters

Name	Type	Required	Description
`name`	`string`	Yes	The server component name to render.
`props`	`object`	No	Props passed to the island component.
`lazy`	`boolean`	No	Defer fetching the island until needed.

Returns

Component — Server-rendered HTML with zero shipped JS for the island.

Examples

<template>
  <NuxtIsland name="PricingTable" :props="{ plan: 'pro' }" />
</template>

<!-- components/islands/Heavy.vue is rendered server-side only -->
<template>
  <NuxtIsland name="Heavy" lazy />
</template>

Notes

Server components (in `components/islands/` or named `*.server.vue`) render their HTML on the server and ship no JavaScript, reducing bundle size. They cannot use client-side interactivity. Often used implicitly via the `.server` component suffix rather than directly. Backed by the `componentIslands` experimental feature.