Using multiple named slots in custom Ionic Component

Issue

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>

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