<NuxtIsland>

原始檔
Nuxt 提供了 <NuxtIsland> 元件，用於渲染非互動式元件，無需任何客戶端 JS。

渲染 Island 元件時，Island 元件的內容是靜態的，因此客戶端不會下載任何 JS。

更改 Island 元件的 props 會觸發對 Island 元件的重新獲取以再次渲染它。

應用程式的全域性樣式與響應一起傳送。
僅限伺服器的元件在底層使用 <NuxtIsland>

屬性

  • name : 要渲染的元件名稱。
    • 型別：string
    • 必填
  • lazy: 使元件非阻塞。
    • 型別: boolean
    • 預設值: false
  • props: 要傳送到要渲染的元件的 props。
    • 型別: Record<string, any>
  • source: 用於呼叫要渲染的 Island 的遠端源。
    • 型別：string
  • dangerouslyLoadClientComponents: 載入遠端源元件所需。
    • 型別: boolean
    • 預設值: false
遠端 Islands 需要在您的 nuxt.config 中將 experimental.componentIslands 設定為 'local+remote'。強烈不建議啟用 dangerouslyLoadClientComponents，因為您無法信任遠端伺服器的 JavaScript。
預設情況下，元件 Islands 從 ~/components/islands/ 目錄中掃描。因此，~/components/islands/MyIsland.vue 元件可以使用 <NuxtIsland name="MyIsland" /> 進行渲染。

插槽

如果已宣告，槽可以傳遞給 Island 元件。

每個槽都是互動式的，因為父元件提供了它。

一些槽保留給 NuxtIsland 用於特殊情況。

  • #fallback: 指定在 Island 載入之前（如果元件是延遲載入的）或 NuxtIsland 未能獲取元件時要渲染的內容。

Ref

  • refresh()
    • 型別: () => Promise<void>
    • 描述: 透過重新獲取伺服器元件來強制重新獲取它。

事件

  • error
    • 引數:
      • error:
        • 型別: unknown
    • 描述: 當 NuxtIsland 未能獲取新 Island 時發出。