<NuxtIsland>

Nuxt proporciona el componente <NuxtIsland> para renderizar un componente no interactivo sin ningún JS del cliente.

Al renderizar un componente island, el contenido del componente island es estático, por lo tanto, no se descarga JS en el lado del cliente.

Cambiar las props del componente island desencadena una nueva obtención del componente island para volver a renderizarlo.

Los estilos globales de tu aplicación se envían con la respuesta.

Los componentes solo del servidor utilizan <NuxtIsland> internamente.

Props

name : Nombre del componente a renderizar.
- type: string
- required
lazy: Hace que el componente no sea bloqueante.
- type: boolean
- default: false
props: Props para enviar al componente a renderizar.
- type: Record<string, any>
source: Fuente remota para llamar al island a renderizar.
- type: string
dangerouslyLoadClientComponents: Necesario para cargar componentes desde una fuente remota.
- type: boolean
- default: false

Los islands remotos necesitan que experimental.componentIslands sea 'local+remote' en tu nuxt.config. Se desaconseja fuertemente habilitar dangerouslyLoadClientComponents ya que no puedes confiar en el javascript de un servidor remoto.

Por defecto, los component islands se escanean desde el directorio ~/components/islands/. Así que el componente ~/components/islands/MyIsland.vue podría renderizarse con <NuxtIsland name="MyIsland" />.

Slots

Los slots pueden pasarse a un componente island si están declarados.

Cada slot es interactivo ya que el componente padre es el que lo proporciona.

Algunos slots están reservados para NuxtIsland para casos especiales.

#fallback: Especifica el contenido que se renderizará antes de que el island se cargue (si el componente es lazy) o si NuxtIsland falla al obtener el componente.

Ref

refresh()
- type: () => Promise<void>
- description: fuerza la nueva obtención del componente del servidor volviéndolo a obtener.

Events

error
- parameters:
  - error:
    - type: unknown
- description: emitido cuando NuxtIsland falla al obtener el nuevo island.

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/components/nuxt-island