nuxt logo

Tradução da Documentação (Não Oficial)

Nuxt.js
Version:v3.17

<NuxtIsland>

O Nuxt fornece o componente <NuxtIsland> para renderizar um componente não interativo sem nenhum JS no cliente.

Ao renderizar um componente ilha, o conteúdo do componente ilha é estático, portanto, nenhum JS é baixado no lado do cliente.

Alterar as props do componente ilha aciona uma nova busca do componente ilha para renderizá-lo novamente.

Os estilos globais da sua aplicação são enviados com a resposta.

Componentes apenas do servidor usam <NuxtIsland> internamente.

Props

  • name : Nome do componente a ser renderizado.
    • type: string
    • required
  • lazy: Torna o componente não bloqueante.
    • type: boolean
    • default: false
  • props: Props a serem enviadas para o componente a ser renderizado.
    • type: Record<string, any>
  • source: Fonte remota para chamar a ilha a ser renderizada.
    • type: string
  • dangerouslyLoadClientComponents: Necessário para carregar componentes de uma fonte remota.
    • type: boolean
    • default: false

Ilhas remotas precisam que experimental.componentIslands seja 'local+remote' no seu nuxt.config. É fortemente desencorajado habilitar dangerouslyLoadClientComponents, pois você não pode confiar no javascript de um servidor remoto.

Por padrão, as ilhas de componentes são escaneadas do diretório ~/components/islands/. Assim, o componente ~/components/islands/MyIsland.vue poderia ser renderizado com <NuxtIsland name="MyIsland" />.

Slots

Slots podem ser passados para um componente ilha se declarados.

Todo slot é interativo, já que o componente pai é quem o fornece.

Alguns slots são reservados para NuxtIsland para casos especiais.

  • #fallback: Especifica o conteúdo a ser renderizado antes da ilha carregar (se o componente for lazy) ou se NuxtIsland falhar ao buscar o componente.

Ref

  • refresh()
    • type: () => Promise<void>
    • description: força uma nova busca do componente do servidor ao buscá-lo novamente.

Events

  • error
    • parameters:
      • error:
        • type: unknown
    • description: emitido quando NuxtIsland falha ao buscar a nova ilha.

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/api/components/nuxt-island