Ionic Popover content not showing

I am trying to display a simple popover with ionic/vue. The popover seems to be triggered correctly and the arrow is showing on iOS devices but the content itself is not being rendered at all.

During some troubleshooting the “SettingsMenu” is rendered properly when displayed on it’s own as but without the use of a popover.

Very grateful for any input as this seems like a very trivial thing to sort out?

what works:


<ion-buttons slot="end">
    <slot name="actions-end"></slot>
    <ion-button  @click="openPopover" slot="end">
       <ion-icon slot="icon-only" :icon="ellipsisVerticalSharp">Show Settings</ion-icon>


import SettingsMenu from '../popovers/settings.vue';

Popover Controller

methods: {
    async openPopover(ev) {
      const popover = await popoverController
          component: SettingsMenu,
          cssClass: 'my-custom-class',
          event: ev,
          translucent: true
      return popover.present();


  <ion-content class="ion-padding">
     Settings Content

import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'SettingsMenu',
  components: { IonContent }

Your code works fine on my end. Is it not something in your CSS?

Thanks for having a look - is “Settings Content” being rendered for you? I can’t see it anywhere in inspect element.

Try passing the click event:

 <ion-button  @click="openPopover($event)" slot="end">

This should position the popover relative to the button.

The issue I am having is that no content is being rendered at all rather than it being a positioning issue. As you can see the popover is empty.

Yes. Here is a demo and repo.

Got it! Clearly, something is up. The demo by @dlodeprojuicer works as expected.

yeah I’ll have a look at it and report back. And thanks @dlodeprojuicer

gents thank you for your inputs. The issue was a missing element in App.vue

1 Like