Ionic Vue popoverController not importing component

Hi All,
I am a self taught beginner that has managed to write several apps thanks to this and other generous communities.

I have been trying for days to create a popover using popoverController and importing a component for the content. I have no issues with inline popovers but when using the popoverController I am only seeing the backdrop and not the component content. I have placed a console log in the component script to see if it is being used but nothing gets written to the console. It’s as though the component is not being imported but I am getting no path or other errors and other components are being imported into the template using the same path alias. I am almost certain it isn’t a css issue or a path issue but beyond that I am out of my depth. Below is the simplified excerpts of my app. Thanks in advance for any insights.

Ionic V6 Vue3


    <ion-content>Hello World!</ion-content>
<script lang="ts">
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

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


            <ion-button @click="openPopover($event)">Click Me</ion-button>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { IonPage, IonButton, IonContent, popoverController } from '@ionic/vue';
import MyPopover from '@/components/popovers/testPopover.vue'

export default defineComponent({
    name: 'test-popover',
    components: {
    setup() {
        const openPopover = async (event: Event) => {
            const Popover = await popoverController.create({
                component: MyPopover,
                event: event,
            await Popover.present();
        return {
<style scoped></style>

I got the Ionic example working on StackBlitz from the example. I downgraded Ionic and Vue in package.json and reloaded the project. Maybe compare with your project and see what maybe missing?

1 Like

Thanks Todd, I’ll try this in a new blank app before comparing then respond. I am however not using Vite.

I was using the vs code ionic extension so I uninstalled that for a start. I reinstalled ionic cli. I then created a new blank app. I tried to use Ionic serve but it asked me to install Vite so I did.

The new app was installed and I was able to serve it to my local host however only a blank page is seen. The HomePage.vue does not seem to load. I am now wondering if this is the same issue as the popup problem I am experiencing.

Should I completely uninstall and reinstall Ionic and Vue. I am not advanced at all and at a loss as to what to do next. I am probably way over my head but have come so far using Ionic Vue for my application that I need to persevere.

I finally managed to get a new app working with the popoverController importing my component. The new app is running Ionic V7. and I downgraded Node to V18 although I am unsure if this is the reason it started to work. I will spend some time comparing the two apps and their config files and reach out again if I can’t find the issue.

Just an update for anyone having similar issues.
The main problem I had was that I used ion-page in my App.ts template instead of ion-app. My application uses a heavily modified sidebar template. When I changed the App.ts to encapsulate the template in ion-app, I was able to use popoverController with components as intended.