<ClientOnly> · Nuxt Components

The <ClientOnly> component is used for purposely rendering a component only on client side.

The content of the default slot will be tree-shaken out of the server build. (This does mean that any CSS used by components within it may not be inlined when rendering the initial HTML.)

Props

placeholderTag | fallbackTag: specify a tag to be rendered server-side.
placeholder | fallback: specify a content to be rendered server-side.

<template>
  <div>
    <Sidebar />
    <!-- The <Comment> component will only be rendered on client-side -->
    <ClientOnly fallback-tag="span" fallback="Loading comments...">
      <Comment />
    </ClientOnly>
  </div>
</template>

Slots

#fallback: specify a content to be rendered on the server and displayed until <ClientOnly> is mounted in the browser.

pages/example.vue

<template>
  <div>
    <Sidebar />
    <!-- This renders the "span" element on the server side -->
    <ClientOnly fallbackTag="span">
      <!-- this component will only be rendered on client side -->
      <Comments />
      <template #fallback>
        <!-- this will be rendered on server side -->
        <p>Loading comments...</p>
      </template>
    </ClientOnly>
  </div>
</template>

Sessions and Authentication

Authentication is an extremely common requirement in web apps. This recipe will show you how to implement basic user registration and authentication in your Nuxt app.

Render components only during development with the <DevOnly> component.