<NuxtIsland>

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

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

¥When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side.

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

¥Changing the island component props triggers a refetch of the island component to re-render it again.

全局用法可以在浏览器端使用,但不能在服务器端使用,以避免用户之间共享上下文。
仅服务器组件在后台使用 <NuxtIsland>

Props

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

插槽

¥Slots

如果声明了插槽,则可以将其传递给孤岛组件。

¥Slots can be passed to an island component if declared.

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

¥Every slot is interactive since the parent component is the one providing it.

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

¥Some slots are reserved to NuxtIsland for special cases.

  • #fallback:指定在岛加载之前(如果组件是延迟加载的)或 NuxtIsland 无法获取组件时要渲染的内容。

Ref

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

事件

¥Events

  • error
    • 参数:
      • 错误:
        • 类型:unknown
    • 说明:当 NuxtIsland 无法获取新岛时发出。