<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
- 類型:
- error:
- 描述:當
NuxtIsland
無法獲取新的 Island 組件時發出。
- 參數: