<ClientOnly> · Nuxtコンポーネント

<ClientOnly> コンポーネントは、コンポーネントをクライアント側でのみレンダリングするために使用されます。

デフォルトスロットの内容は、サーバー側のビルドからツリーシェイクされます。（つまり、コンポーネントで使用されるCSSは、初期HTMLをレンダリングする際にインライン化されない場合があります。）

プロパティ

placeholderTag | fallbackTag: サーバーサイドでレンダリングするタグを指定します。
placeholder | fallback: サーバーサイドでレンダリングするコンテンツを指定します。

<template>
  <div>
    <Sidebar />
    <!-- The <Comment> component will only be rendered on client-side -->
    <ClientOnly fallback-tag="span" fallback="Loading comments...">
      <Comment />
    </ClientOnly>
  </div>
</template>

スロット

#fallback: サーバーでレンダリングされ、ブラウザで<ClientOnly>がマウントされるまで表示されるコンテンツを指定します。

pages/example.vue

<template>
  <div>
    <Sidebar />
    <!-- This renders the "span" element on the server side -->
    <ClientOnly fallbackTag="span">
      <!-- this component will only be rendered on client side -->
      <Comments />
      <template #fallback>
        <!-- this will be rendered on server side -->
        <p>Loading comments...</p>
      </template>
    </ClientOnly>
  </div>
</template>

NuxtでのカスタムuseFetch

Nuxt 3で外部APIを呼び出すためのカスタムフェッチャーを作成する方法。

開発中にのみコンポーネントをレンダリングする<DevOnly>コンポーネント。