This component is used to purposely render a component only on client-side. To import a component only on the client, register the component in a client-side only plugin.

Props:

• placeholder: string
  • Use a text as placeholder until <client-only /> is mounted on client-side.

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

Slots:

• placeholder:

  • Use a slot as placeholder until <client-only /> is mounted on client-side.

  <template>
  <div>
    <sidebar />
    <client-only>
      <!-- this component will only be rendered on client-side -->
      <comments />
  
      <!-- loading indicator, rendered on server-side -->
       <comments-placeholder slot="placeholder" />
    </client-only>
  </div>
  </template>

This component is imported from egoist/vue-client-only. Thanks @egoist!