<NuxtIsland>

Nuxt 提供了 <NuxtIsland> 组件,用于渲染无需客户端 JavaScript 的非交互式组件。

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

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

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

属性

  • name:要渲染的组件名称。
    • 类型string
    • 必需
  • lazy:使组件非阻塞。
    • 类型boolean
    • 默认值false
  • 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 无法获取组件时渲染的内容。

引用

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

事件

  • error
    • 参数
      • error
        • 类型unknown
    • 描述:当 NuxtIsland 无法获取新的岛屿组件时触发。