通过 100+ 个技巧学习 Nuxt!

<NuxtIsland>

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

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

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

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

Props

  • 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/ 目录扫描。因此,可以使用 <NuxtIsland name="MyIsland" /> 渲染 ~/components/islands/MyIsland.vue 组件。

插槽

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

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

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

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

Ref

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

事件

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