Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Client-only content doesn't render in component's slot

See original GitHub issue

Original issue reported at nuxt/nuxt.js#8579.

The content inside <client-only> tag doesn’t render when the tag is placed in a component’s slot of another component’s slot, as shown in the following reproduction: codesandbox

@egoist any chance you could look into this issue please? I can see the repo hasn’t been updated in a while but this missing functionality is crucial for some use-cases, when client-only tag is the only way to go in the nested slots structure 😕

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:8

Top GitHub Comments

1reaction

MarineLBcommented, Nov 22, 2021

Had the same issue that I worked around by wrapping the entire component in the client only instead of the slot.

Initially, triggering the issue

<my-component>
   <client-only>{{ foobar }}</client-only>
</my-component>

The current fix, not ideal but works in our case

<client-only>
    <my-component>{{ foobar }}</my-component>
</client-only>

1reaction

akashrajumcommented, Aug 4, 2021

One tiny workaround I found for now is by removing scoping to the template and using the slot where we have to pass the component as the default slot and template. So this basically - https://codesandbox.io/s/vue-horizontal-calendar-nuxt-demo-forked-hvx9e?file=/pages/index.vue