透過超過 100 個訣竅的集合來學習 Nuxt!

<NuxtIsland>

Nuxt 提供了 <NuxtIsland> 元件來渲染不需任何客戶端 JS 的非互動式元件。

當渲染一個島嶼元件時,島嶼元件的內容是靜態的,因此不會在客戶端下載任何 JS。

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

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

Props

  • name:要渲染的元件名稱。
    • typestring
    • 必填
  • lazy:使元件非阻塞。
    • typeboolean
    • defaultfalse
  • props:要發送到要渲染的元件的 props。
    • typeRecord<string, any>
  • source:呼叫島嶼進行渲染的遠端來源。
    • typestring
  • dangerouslyLoadClientComponents:需要從遠端來源載入元件。
    • typeboolean
    • defaultfalse
遠端島嶼需要在您的 nuxt.config 中將 experimental.componentIslands 設定為 'local+remote'。強烈建議不要啟用 dangerouslyLoadClientComponents,因為您無法信任遠端伺服器的 javascript。
預設情況下,元件島嶼是從 ~/components/islands/ 目錄掃描的。因此 ~/components/islands/MyIsland.vue 元件可以使用 <NuxtIsland name="MyIsland" /> 渲染。

Slots

如果宣告了,可以將插槽傳遞給島嶼元件。

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

有些插槽是保留給 NuxtIsland 在特殊情況下使用的。

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

Ref

  • refresh()
    • type() => Promise<void>
    • description:透過重新獲取來強制重新獲取伺服器元件。

Events

  • error
    • parameters:
      • error:
        • typeunknown
    • description:當 NuxtIsland 無法獲取新的島嶼時發出。