Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
51 lines (39 sloc) 1.37 KB
title description
API: The <client-only> Component
Render a component only on client-side, and display a placeholder text on server-side.

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.
<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!

You can’t perform that action at this time.