<NuxtIsland>

ソース
Nuxt は、クライアント JS なしで非インタラクティブなコンポーネントをレンダリングするための <NuxtIsland> コンポーネントを提供します。

アイランドコンポーネントをレンダリングする場合、アイランドコンポーネントのコンテンツは静的なため、クライアント側で JS はダウンロードされません。

アイランドコンポーネントの props を変更すると、アイランドコンポーネントが再度レンダリングされるように再フェッチがトリガーされます。

アプリケーションのグローバルスタイルは、レスポンスと一緒に送信されます。
サーバー専用コンポーネントは、内部で <NuxtIsland> を使用します。

プロップス

  • name : レンダリングするコンポーネントの名前。
    • type: string
    • 必須
  • lazy: コンポーネントをノンブロッキングにします。
    • type: boolean
    • default: false
  • props: レンダリングするコンポーネントに送信する props。
    • type: Record<string, any>
  • source: アイランドをレンダリングするために呼び出すリモートソース。
    • type: string
  • dangerouslyLoadClientComponents: リモートソースからコンポーネントをロードするために必要です。
    • type: boolean
    • default: false
リモートアイランドは、nuxt.config で experimental.componentIslands を 'local+remote' に設定する必要があります。リモートサーバーの JavaScript を信頼できないため、dangerouslyLoadClientComponents を有効にすることは強く推奨されません。
デフォルトでは、コンポーネントアイランドは ~/components/islands/ ディレクトリからスキャンされます。したがって、~/components/islands/MyIsland.vue コンポーネントは、<NuxtIsland name="MyIsland" /> でレンダリングできます。

スロット

宣言されていれば、スロットをアイランドコンポーネントに渡すことができます。

親コンポーネントが提供しているため、すべてのスロットはインタラクティブです。

いくつかのスロットは、特別なケースのために NuxtIsland 用に予約されています。

  • #fallback: アイランドがロードされる前（コンポーネントが遅延している場合）または NuxtIsland がコンポーネントのフェッチに失敗した場合にレンダリングするコンテンツを指定します。

参照

  • refresh()
    • type: () => Promise<void>
    • description: サーバーコンポーネントを再フェッチすることで、強制的に再フェッチします。

イベント

  • error
    • パラメータ:
      • error:
        • type: unknown
    • description: NuxtIsland が新しいアイランドのフェッチに失敗したときに発生します。