---
title: "<NuxtIsland>"
description: "Nuxt provides the <NuxtIsland> component to render a non-interactive component without any client JS."
links:
  - label: Source
    icon: i-simple-icons-github
    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-island.ts
    size: xs
---

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.

::note
Global styles of your application are sent with the response.
::

::tip
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`
- **dangerouslyLoadClientComponents**: Required to load client components from a remote source.
  - **type**: `boolean`
  - **default**: `false`

::note
Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
::

::warning{icon="i-ph-warning-duotone"}
Using the `source` prop to render content from a remote server is inherently dangerous. When you specify a remote `source`, you are fully trusting that server to provide safe HTML content that will be rendered directly in your application.

This is similar to using `v-html` with external content - the remote server can inject any HTML, including potentially malicious content. **Only use `source` with servers you fully trust and control.**

The `dangerouslyLoadClientComponents` prop controls an additional layer of risk: whether to also download and execute client components from the remote source. Even with `dangerouslyLoadClientComponents` disabled (the default), you are still trusting the remote server's HTML output.
::

::note
Component props and context are sent as GET query parameters to enable caching. Query parameters may be visible in server access logs, CDN caches, and HTTP `Referer` headers.
::

::note
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 if `NuxtIsland` fails to fetch the component.

## Ref

- `refresh()`
  - **type**: `() => Promise<void>`
  - **description**: force refetch the server component by refetching it.

## Events

- `error`
  - **parameters**:
    - **error**:
      - **type**: `unknown`
  - **description**: emitted when `NuxtIsland` fails to fetch the new island.