API: The <client-only> Component

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.

Warning: If you are using a version of Nuxt < v2.9.0, use <no-ssr> instead of <client-only>

Props:

  • placeholder: string
    • Use a text as placeholder until <client-only /> is mounted on client-side.
  1. <template>
  2.   <div>
  3.     <sidebar />
  4.     <client-only placeholder="Loading...">
  5.       <!-- this component will only be rendered on client-side -->
  6.       <comments />
  7.     </client-only>
  8.   </div>
  9. </template>

Slots:

  • placeholder:

    • Use a slot as placeholder until <client-only /> is mounted on client-side.
  1. <template>
  2. <div>
  3.   <sidebar />
  4.   <client-only>
  5.     <!-- this component will only be rendered on client-side -->
  6.     <comments />
  8.     <!-- loading indicator, rendered on server-side -->
  9.      <comments-placeholder slot="placeholder" />
  10.   </client-only>
  11. </div>
  12. </template>

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