Nuxt•2mo ago

Is there a way to render .client.vue components with a fallback?

I know you can do <ClientOnly> wrappers around existing components, but I'm asking if there's a way to use named client components (/components/Some.client.vue) and still have a <template #fallback>Loading...</template>

2 Replies

kapa.ai•2mo ago

Hi @saganic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can render .client.vue components with a fallback by wrapping them in the <ClientOnly> component. The <ClientOnly> component provides a #fallback slot, which allows you to specify content (like a loading indicator) that will be rendered on the server until the client-only component is mounted in the browser. Here's how you can use it with a named client component (e.g., Some.client.vue):

<template>
  <ClientOnly>
    <Some />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </ClientOnly>
</template>

<template>
  <ClientOnly>
    <Some />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </ClientOnly>
</template>

This approach is explicitly documented:

You can also achieve a similar result with the <ClientOnly> component.
...
<ClientOnly> ... provides a #fallback slot to specify content to be rendered on the server and displayed until <ClientOnly> is mounted in the browser.
Docs > 4.x > Api > Components > ClientOnly

There is no built-in way to specify a fallback directly inside the .client.vue file itself; the fallback mechanism is provided by the <ClientOnly> wrapper. So, to have a fallback for your .client.vue components, you should always use them inside <ClientOnly> and provide the fallback slot as shown above. If you need this behavior globally, you would need to consistently wrap your client components with <ClientOnly> wherever you use them. There is no configuration or convention in Nuxt that automatically provides a fallback for all .client.vue components without this wrapper, according to the current documentation. If you need more advanced fallback handling (e.g., for SSR errors), you might also look into the experimental <NuxtClientFallback> component, but for standard client-only components, <ClientOnly> is the recommended and documented approach ClientOnly API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@165154138898825216> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Is there a way to render .client.vue components with a fallback?

Did you find this page helpful?