<NuxtIsland>

源代码
Nuxt 提供了 <NuxtIsland> 组件，用于在不下载任何客户端 JS 的情况下渲染非交互式组件。

在渲染 island 组件时，island 组件的内容是静态的，因此客户端不会下载任何 JS。

更改 island 组件的 props 会触发对该 island 组件的重新获取以再次渲染它。

应用的全局样式会随响应一起发送。
仅服务端组件在底层使用 <NuxtIsland>。

Props

  • name : 要渲染的组件名称。
    • type: string
    • required
  • lazy: 将组件设为非阻塞。
    • type: boolean
    • default: false
  • props: 传递给渲染组件的 props。
    • type: Record<string, any>
  • source: 调用要渲染的 island 的远程来源。
    • type: string
  • dangerouslyLoadClientComponents: 从远程来源加载组件时所必需。
    • type: boolean
    • default: false
远程 islands 需要在你的 nuxt.config 中将 experimental.componentIslands 设置为 'local+remote'。 强烈不建议启用 dangerouslyLoadClientComponents，因为你不能信任远程服务器的 JavaScript。
默认情况下，组件 islands 会从 ~/components/islands/ 目录中扫描。因此 ~/components/islands/MyIsland.vue 组件可以通过 <NuxtIsland name="MyIsland" /> 来渲染。

Slots

如果声明了插槽（slot），则可以将插槽传递给 island 组件。

每个插槽都是交互式的，因为父组件是提供它的那一方。

有些插槽为 NuxtIsland 保留以处理特殊情况。

  • #fallback: 指定在 island 加载之前（如果组件为 lazy）或 NuxtIsland 无法获取组件时要渲染的内容。

Ref

  • refresh()
    • type: () => Promise<void>
    • description: 通过重新获取来强制重新拉取服务端组件。

Events

  • error
    • parameters:
      • error:
        • type: unknown
    • description: 当 NuxtIsland 无法获取新的 island 时触发。