nuxt logo

文档翻译(非官方)

<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

如果声明了,slots 可以传递给 island 组件。

每个 slot 都是交互式的,因为是由父组件提供的。

一些 slots 被保留给 NuxtIsland 用于特殊情况。

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

Ref

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

Events

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