CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Stephan-v
Stephan-v

Reputation: 20369

Vue named slots do not work when wrapped

I have a responsive-menu component which I want to use named slots inside of this up my template markup:

<template>
    <div class="responsive-menu">
        <div class="menu-header">
            <slot name="header"></slot>
        </div>
    </div>
</template>

Whenever I try my named slot like this it work perfectly fine:

<responsive-menu>
    <h3 slot="header">Responsive menu header</h3>
</responsive-menu>

However as soon as I wrap it with a class nothing shows up anymore.

<responsive-menu>
    <div class="container">
        <h3 slot="header">Responsive menu header</h3>
    </div>
</responsive-menu>

What is going on here? Shouldn't I just be able to wrap the named component? Which does it appear that my named slots need to be direct children of my Vue component?

Upvotes: 5

Views: 23231

Answers (3)

Mahmood Sayeed
Mahmood Sayeed

Reputation: 51

You could use it like v-slot because slot syntax is deprecated as mentioned here:

<responsive-menu>
    <div class="container">
        <h3 v-slot:header>Responsive menu header</h3>
    </div>
</responsive-menu>

or Alternatively, a shorthand:

<responsive-menu>
    <div class="container">
        <h3 #header>Responsive menu header</h3>
    </div>
</responsive-menu>

Upvotes: 1

Malako
Malako

Reputation: 535

It works with Vue >= 2.6. Just upgrade vue and vue-template-compiler.

Upvotes: 2

donMateo
donMateo

Reputation: 2394

It does not work because your "wrapped slot" isn't direct child of responsive-menu tag.

try something like that:

<responsive-menu>
    <div class="container" slot="header">
        <h3>Responsive menu header</h3>
    </div>
</responsive-menu>

jsfiddle

Upvotes: 8

Related Questions