[vue/ionic6] How to create a modal within a component

[m1nka]

I am trying to create an inline modal as per documentation within a component [vue/ts/ionic 6] . However using the code in the documentation does not work because the export default defineComponent({ will throw an error:

A default export must be at the top level of a file or module declaration.

As far as I can tell, this is because Vue uses <script setup lang="ts"> does not allow an export within a component. The more I try to fix this issue (remove <script setup>, move modal to main.ts, etc.) the more I fail

Can you point me in the right direction on how to include a modal within a component without using this exportor how to do it in a different way?

[m1nka]

This was probably a dumb question… Just use defineComponent({ without export default.

[jonz94]

When I first started learning vue + ionic, I also faced the same issue, so you are definitely not alone

And one thing I recently learned is that the defineComponent part is not required when using <script setup> syntax. It feels like magic I would said.

Here is an example I rewrite ion-modal: Ionic Mobile App Custom Modal API Component demo using the
<script setup> syntax:

<script setup lang="ts">
import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/vue'
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>Inline Modal (with script setup)</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-button expand="block" @click="isOpen = true">Open</ion-button>

    <ion-modal :is-open="isOpen">
      <ion-header>
        <ion-toolbar>
          <ion-title>Modal</ion-title>
          <ion-buttons slot="end">
            <ion-button @click="isOpen = false">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <p>This is the inline modal using "script setup" syntax</p>
      </ion-content>
    </ion-modal>
  </ion-content>
</template>

ionic-vue-inline-modal-script-setup

There is more detail about what <script setup> syntax doing under the hood:

| Vue.js

Hope this information is helpful

[m1nka]

That makes a lot of sense and was very helpful, thanks a lot! The modal is working well now (and some other components where I tried to use defineComponent).

The only thing I cannot get to work is the card modal on iOS. From the docs:

To create a card modal, developers need to set the presentingElement property on ion-modal.The presentingElement property accepts a reference to the element that should display under your modal. This is typically a reference to ion-router-outlet.

The code from the documentation this.presentingElement = this.$refs.page.$el; does not work for me. How can I reference the current page as presentingElement? Do you happen to have an idea here as well?