-
-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Client-only content doesn't render in component's slot #105
Comments
I have this exact issue, I'm surprised nobody faced this issue before.
Here is my exact component.
And here is
|
From my understanding, Vue think it has to render a comment |
Wrapping my slot in a
|
My problem was with Nuxt component autoload/discovery.
|
Hey, I'm also stuck with a similar issue, as you can see in this code sandbox -- https://codesandbox.io/s/vue-horizontal-calendar-nuxt-demo-myytd?file=/pages/index.vue I am able to render component normally but if I pass it inside a template slot it's not rendering. vue-horizontal-calendar is the component, I have declared twice but the one outside template is the only one rendering |
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 |
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
The current fix, not ideal but works in our case
|
Not perfect, but I believe its possible to overcome this issue by rewriting render(h) {
if (this._isMounted) {
return this.$slots.default;
}
this.$once('hook:mounted', () => {
this.$forceUpdate();
});
if (this.placeholderTag && (this.placeholder || this.$slots.placeholderSlot)) {
return h(
this.placeholderTag,
{
class: ['client-only-placeholder']
},
this.placeholder || this.$slots.placeholderSlot
)
}
return this.$slots.default && this.$slots.default.length > 0 ? this.$slots.default.map(() => h(false)) : h(false)
} |
What seem to have worked for me was to use |
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 :/
The text was updated successfully, but these errors were encountered: