透過超過 100 個技巧來學習 Nuxt!

<NuxtIsland>

Nuxt 提供了 <NuxtIsland> 組件來渲染非互動式組件,而無需任何客戶端 JS。

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

變更 Island 組件的 props 會觸發重新獲取 Island 組件以再次重新渲染。

應用程式的全局樣式會隨響應一起發送。
伺服器端組件在底層使用 <NuxtIsland>

屬性

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

插槽

如果已宣告,則插槽可以傳遞給 Island 組件。

每個插槽都是互動式的,因為是由父組件提供。

某些插槽保留給 NuxtIsland 以用於特殊情況。

  • #fallback:指定在 Island 組件載入之前(如果組件是延遲載入)或 NuxtIsland 無法取得組件時要渲染的內容。

Ref

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

事件

  • error
    • 參數:
      • error:
        • 類型unknown
    • 描述:當 NuxtIsland 無法獲取新的 Island 組件時發出。