Want to take a look at our new docs? Our new docs are now in beta. Have fun!

API: <client-only> コンポーネント

このコンポーネントは、クライアント側でのみコンポーネントを意図的にレンダリングするために使用されます。クライアント側でのみコンポーネントをインポートするには、コンポーネントを client-side only plugin に登録します。

警告: Nuxt のバージョンが v2.9.0 未満の場合、<client-only> のかわりに <no-ssr> を使用してください。

Props:

  • placeholder: string
    • <client-only /> がクライアント側にマウントされるまで、プレースホルダーとしてテキストを使用します。
<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- このコンポーネントは、クライアント側でレンダリングするためだけに使用されます -->
      <comments />
    </client-only>
  </div>
</template>

Slots:

  • placeholder:
    • <client-only /> がクライアント側にマウントされるまで、プレースホルダーとしてスロットを使用します。
<template>
  <div>
    <sidebar />
    <client-only>
      <!-- このコンポーネントは、クライアント側でレンダリングするためだけに使用されます -->
      <comments />

      <!-- サーバー側でレンダリングされた loading indicator -->
      <comments-placeholder slot="placeholder" />
    </client-only>
  </div>
</template>

このコンポーネントは egoist/vue-client-only からインポートされました。 ありがとう @egoist

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us