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>

And here is the navbar template, simplified…

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

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

I cant make it work… any ideas???


Did you try with:

<template #first>HELLO</template>


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

Answered By – Nikola Pavicevic

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published