Search code examples
vue.jsionic-frameworkvuejs3ionic6

Using multiple named slots in custom Ionic Component

I'm trying to add more than one slot to a custom component, in this case a Navbar... When I use only one, and without a name, it works perfectly. When I include a slot name, it stops working.

Calling the navbar...

  <CustomNavbar title="USERS.NAME">
    <div slot="first">HELLO</div>
    <div slot="second">GOODBYE</div>
  </CustomNavbar>

And here is the navbar template, simplified...

  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <slot name="first"></slot>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
    <ion-buttons slot="primary">
      <slot name="second"></slot>
    </ion-buttons>
  </ion-toolbar>

I'm using Ionic v6 with Vue.js 3.

I cant make it work... any ideas???

Solution

  • Did you try with:

    <template #first>HELLO</template>

    or

    <template v-slot:first>HELLO</template>