<NuxtIsland>

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

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

更改岛屿组件的 props 会触发岛屿组件的重新获取，以再次渲染它。

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

属性

  • name : 要渲染的组件名称。
    • 类型：string
    • 必填
  • lazy: 使组件非阻塞。
    • 类型: boolean
    • 默认值: false
  • props: 要发送给要渲染的组件的 props。
    • 类型: Record<string, any>
  • source: 用于调用要渲染的岛屿的远程源。
    • 类型：string
  • dangerouslyLoadClientComponents: 从远程源加载组件所需。
    • 类型: boolean
    • 默认值: false
远程岛屿需要在您的 nuxt.config 中将 experimental.componentIslands 设置为 'local+remote'。强烈不建议启用 dangerouslyLoadClientComponents，因为您无法信任远程服务器的 javascript。
默认情况下，组件岛屿从 ~/components/islands/ 目录扫描。因此，~/components/islands/MyIsland.vue 组件可以使用 <NuxtIsland name="MyIsland" /> 渲染。

插槽

如果声明，插槽可以传递给岛屿组件。

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

某些插槽保留给 NuxtIsland 用于特殊情况。

  • #fallback: 指定在岛屿加载之前（如果组件是惰性的）或如果 NuxtIsland 未能获取组件时要渲染的内容。

Ref

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

事件

  • error
    • 参数:
      • error:
        • 类型: unknown
    • 描述: 当 NuxtIsland 未能获取新岛屿时发出。