<NuxtIsland>

源文件
Nuxt 提供了 <NuxtIsland> 组件，用于渲染一个无需任何客户端 JS 的非交互式组件。

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

更改 Island 组件的 props 会触发 Island 组件的重新获取（refetch）以再次渲染它。

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

属性

  • name : 要渲染的组件的名称。
    • 类型：string
    • 必需
  • lazy: 使组件非阻塞。
    • 类型: boolean
    • 默认值: false
  • props: 要发送到要渲染的组件的 Props。
    • 类型: Record<string, any>
  • source: 用于调用 Island 进行渲染的远程源。
    • 类型：string
  • dangerouslyLoadClientComponents: 从远程源加载客户端组件所需。
    • 类型: boolean
    • 默认值: false
远程 Islands 需要在你的 nuxt.config 中将 experimental.componentIslands 设置为 'local+remote'。
使用 source 属性从远程服务器渲染内容本质上是危险的。当你指定一个远程 source 时，你完全信任该服务器提供将直接在你的应用程序中渲染的安全 HTML 内容。这类似于使用带有外部内容的 v-html——远程服务器可以注入任何 HTML，包括潜在的恶意内容。仅将 source 用于你完全信任和控制的服务器。dangerouslyLoadClientComponents 属性控制着额外的风险层：是否也从远程源下载和执行客户端组件。即使禁用了 dangerouslyLoadClientComponents（默认值），你仍然需要信任远程服务器的 HTML 输出。
默认情况下，组件 Islands 从 ~/components/islands/ 目录扫描。因此，~/components/islands/MyIsland.vue 组件可以使用 <NuxtIsland name="MyIsland" /> 渲染。

插槽

如果声明了插槽，则可以将插槽传递给 Island 组件。

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

一些插槽是为特殊情况保留给 NuxtIsland 的。

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

Ref

  • refresh()
    • 类型: () => Promise<void>
    • 描述: 通过重新获取（refetch）来强制重新获取服务器组件。

事件

  • error
    • 参数:
      • error:
        • 类型: unknown
    • 描述: 当 NuxtIsland 无法获取新 Island 时触发。