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

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

Contributors

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