From 8a5993895e7e65cf147cba3c95e326887cb3355e Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:26:14 -0400
Subject: [PATCH 01/24] chore(docs): streamline demo using script setup syntax
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplifies usage demo using Vue’s script setup syntax.
---
 static/usage/v7/input/counter/vue.md | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
index c601abc2c3d..6e3e6ee2396 100644
--- a/static/usage/v7/input/counter/vue.md
+++ b/static/usage/v7/input/counter/vue.md
@@ -12,17 +12,11 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
-  import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-    methods: {
-      customFormatter(inputLength, maxLength) {
-        return `${maxLength - inputLength} characters remaining`;
-      },
-    },
-  });
+<script lang="ts" setup>
+  import { IonInput } from '@ionic/vue'; 
+  
+  const customFormatter = (inputLength, maxLength) => {
+    return `${maxLength - inputLength} characters remaining`;
+  }
 </script>
 ```

From 348b893aae9fc6552a062d4ffaae4d09df0842fc Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:34:51 -0400
Subject: [PATCH 02/24] chore(docs): streamline demo using script setup syntax
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplifies usage demo using Vue’s script setup syntax.
---
 static/usage/v7/alert/buttons/vue.md | 54 +++++++++++-----------------
 1 file changed, 21 insertions(+), 33 deletions(-)

diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
index cd126758598..25ae70647d0 100644
--- a/static/usage/v7/alert/buttons/vue.md
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -11,44 +11,32 @@
   <p>{{ roleMessage }}</p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const handlerMessage = ref('');
-      const roleMessage = ref('');
+  const handlerMessage = ref('');
+  const roleMessage = ref('');
 
-      const alertButtons = [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          handler: () => {
-            handlerMessage.value = 'Alert canceled';
-          },
-        },
-        {
-          text: 'OK',
-          role: 'confirm',
-          handler: () => {
-            handlerMessage.value = 'Alert confirmed';
-          },
-        },
-      ];
-
-      const setResult = (ev: CustomEvent) => {
-        roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
-      };
-
-      return {
-        handlerMessage,
-        roleMessage,
-        alertButtons,
-        setResult,
-      };
+  const alertButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      handler: () => {
+        handlerMessage.value = 'Alert canceled';
+      },
     },
+    {
+      text: 'OK',
+      role: 'confirm',
+      handler: () => {
+        handlerMessage.value = 'Alert confirmed';
+      },
+    },
+  ];
+
+  const setResult = (ev: CustomEvent) => {
+    roleMessage.value = `Dismissed with role: ${ev.detail.role}`;
   };
 </script>
 ```

From a475b88a12c7af9f06adda31729674cb112b4cee Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:37:23 -0400
Subject: [PATCH 03/24] chore(docs): streamline demo using script setup syntax
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplifies usage demo using Vue’s script setup syntax.
---
 static/usage/v7/alert/customization/vue.md | 27 ++++++++--------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md
index c526c93de8d..eafb78ae012 100644
--- a/static/usage/v7/alert/customization/vue.md
+++ b/static/usage/v7/alert/customization/vue.md
@@ -4,26 +4,19 @@
   <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" :buttons="alertButtons"></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = [
-        {
-          text: 'No',
-          cssClass: 'alert-button-cancel',
-        },
-        {
-          text: 'Yes',
-          cssClass: 'alert-button-confirm',
-        },
-      ];
-
-      return { alertButtons };
+  const alertButtons = [
+    {
+      text: 'No',
+      cssClass: 'alert-button-cancel',
     },
-  };
+    {
+      text: 'Yes',
+      cssClass: 'alert-button-confirm',
+    },
+  ];
 </script>
 
 <style>

From 3d349959463a749356102de57ccd2f93365c5a55 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:39:08 -0400
Subject: [PATCH 04/24] chore(docs): streamline demo using script setup syntax
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplifies usage demo using Vue’s script setup syntax.
---
 static/usage/v7/alert/inputs/radios/vue.md | 43 +++++++++-------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/static/usage/v7/alert/inputs/radios/vue.md b/static/usage/v7/alert/inputs/radios/vue.md
index 994496c025e..c2b937c1472 100644
--- a/static/usage/v7/alert/inputs/radios/vue.md
+++ b/static/usage/v7/alert/inputs/radios/vue.md
@@ -9,33 +9,26 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-      const alertInputs = [
-        {
-          label: 'Red',
-          type: 'radio',
-          value: 'red',
-        },
-        {
-          label: 'Blue',
-          type: 'radio',
-          value: 'blue',
-        },
-        {
-          label: 'Green',
-          type: 'radio',
-          value: 'green',
-        },
-      ];
-
-      return { alertButtons, alertInputs };
+  const alertButtons = ['OK'];
+  const alertInputs = [
+    {
+      label: 'Red',
+      type: 'radio',
+      value: 'red',
+    },
+    {
+      label: 'Blue',
+      type: 'radio',
+      value: 'blue',
+    },
+    {
+      label: 'Green',
+      type: 'radio',
+      value: 'green',
     },
-  };
+  ];
 </script>
 ```

From 2dc86ec62c5f0d1c853959a8b5ccd3f65d971dd0 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:45:55 -0400
Subject: [PATCH 05/24] docs(alert): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../usage/v7/alert/inputs/text-inputs/vue.md  | 51 ++++++++-----------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/static/usage/v7/alert/inputs/text-inputs/vue.md b/static/usage/v7/alert/inputs/text-inputs/vue.md
index 98a2b138607..fe4072e756d 100644
--- a/static/usage/v7/alert/inputs/text-inputs/vue.md
+++ b/static/usage/v7/alert/inputs/text-inputs/vue.md
@@ -9,37 +9,30 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-      const alertInputs = [
-        {
-          placeholder: 'Name',
-        },
-        {
-          placeholder: 'Nickname (max 8 characters)',
-          attributes: {
-            maxlength: 8,
-          },
-        },
-        {
-          type: 'number',
-          placeholder: 'Age',
-          min: 1,
-          max: 100,
-        },
-        {
-          type: 'textarea',
-          placeholder: 'A little about yourself',
-        },
-      ];
-
-      return { alertButtons, alertInputs };
+  const alertButtons = ['OK'];
+  const alertInputs = [
+    {
+      placeholder: 'Name',
+    },
+    {
+      placeholder: 'Nickname (max 8 characters)',
+      attributes: {
+        maxlength: 8,
+      },
+    },
+    {
+      type: 'number',
+      placeholder: 'Age',
+      min: 1,
+      max: 100,
+    },
+    {
+      type: 'textarea',
+      placeholder: 'A little about yourself',
     },
-  };
+  ];
 </script>
 ```

From 91f33ac5290babc075e5d040e68eb72adda7eb13 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:47:30 -0400
Subject: [PATCH 06/24] docs(alert): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../v7/alert/presenting/controller/vue.md     | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/static/usage/v7/alert/presenting/controller/vue.md b/static/usage/v7/alert/presenting/controller/vue.md
index 6ec781a6bf2..8c46798eff5 100644
--- a/static/usage/v7/alert/presenting/controller/vue.md
+++ b/static/usage/v7/alert/presenting/controller/vue.md
@@ -3,25 +3,18 @@
   <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, alertController } from '@ionic/vue';
 
-  export default {
-    components: { IonButton },
-    setup() {
-      const presentAlert = async () => {
-        const alert = await alertController.create({
-          header: 'Alert',
-          subHeader: 'Important message',
-          message: 'This is an alert!',
-          buttons: ['OK'],
-        });
+  const presentAlert = async () => {
+    const alert = await alertController.create({
+      header: 'Alert',
+      subHeader: 'Important message',
+      message: 'This is an alert!',
+      buttons: ['OK'],
+    });
 
-        await alert.present();
-      };
-
-      return { presentAlert };
-    },
+    await alert.present();
   };
 </script>
 ```

From d7923c7d44d89119e472eb8e9fd89b92a1882da9 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:48:57 -0400
Subject: [PATCH 07/24] docs(alert): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/alert/presenting/isOpen/vue.md | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/alert/presenting/isOpen/vue.md b/static/usage/v7/alert/presenting/isOpen/vue.md
index 57b8ccc217a..d86afe31101 100644
--- a/static/usage/v7/alert/presenting/isOpen/vue.md
+++ b/static/usage/v7/alert/presenting/isOpen/vue.md
@@ -11,22 +11,15 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const isOpen = ref(false);
-      const alertButtons = ['OK'];
+  const isOpen = ref(false);
+  const alertButtons = ['OK'];
 
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
-
-      return { isOpen, alertButtons, setOpen };
-    },
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
   };
 </script>
 ```

From 6334fb4ed0b0b94fa580597e9bcb81a03b5cff05 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:50:58 -0400
Subject: [PATCH 08/24] docs(alert): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/alert/presenting/trigger/vue.md | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/static/usage/v7/alert/presenting/trigger/vue.md b/static/usage/v7/alert/presenting/trigger/vue.md
index 86e93aaac1f..f645a91fe1e 100644
--- a/static/usage/v7/alert/presenting/trigger/vue.md
+++ b/static/usage/v7/alert/presenting/trigger/vue.md
@@ -10,16 +10,9 @@
   ></ion-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAlert, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonAlert, IonButton },
-    setup() {
-      const alertButtons = ['OK'];
-
-      return { alertButtons };
-    },
-  };
+  const alertButtons = ['OK'];
 </script>
 ```

From 68d56dfec5f722b2bfb1ab36e78aa2b479513abc Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 04:58:58 -0400
Subject: [PATCH 09/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../v7/modal/controller/vue/example_vue.md    | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
index 1b98547ac47..7f9d5b03eac 100644
--- a/static/usage/v7/modal/controller/vue/example_vue.md
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -13,31 +13,25 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
   import Modal from './Modal.vue';
+  import { ref } from 'vue';
+  
+  const message = ref('This modal example uses the modalController to present and dismiss modals.');
+  
+  const openModal = async () => {
+    const modal = await modalController.create({
+      component: Modal,
+    });
+    
+    modal.present();
 
-  export default {
-    components: { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle },
-    data() {
-      return {
-        message: 'This modal example uses the modalController to present and dismiss modals.',
-      };
-    },
-    methods: {
-      async openModal() {
-        const modal = await modalController.create({
-          component: Modal,
-        });
-        modal.present();
+    const { data, role } = await modal.onWillDismiss();
 
-        const { data, role } = await modal.onWillDismiss();
-
-        if (role === 'confirm') {
-          this.message = `Hello, ${data}!`;
-        }
-      },
-    },
-  };
+    if (role === 'confirm') {
+      this.message = `Hello, ${data}!`;
+    }    
+  }
 </script>
 ```

From 7c3b6d134ec0cb596b0e0e0b72380847b4320f2e Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:01:22 -0400
Subject: [PATCH 10/24] docs(alert): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../usage/v7/modal/controller/vue/modal_vue.md | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
index 7df58303b59..4e6231a74ef 100644
--- a/static/usage/v7/modal/controller/vue/modal_vue.md
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -18,7 +18,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonContent,
     IonHeader,
@@ -31,18 +31,8 @@
     modalController,
   } from '@ionic/vue';
   import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Modal',
-    components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonItem, IonInput },
-    methods: {
-      cancel() {
-        return modalController.dismiss(null, 'cancel');
-      },
-      confirm() {
-        return modalController.dismiss(this.name, 'confirm');
-      },
-    },
-  });
+  
+  const cancel = () => modalController.dismiss(null, 'cancel');
+  const confirm = () => modalController.dismiss(this.name, 'confirm');
 </script>
 ```

From 69f36328c571e452252fc087f5485f29e4e5fbda Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:04:23 -0400
Subject: [PATCH 11/24] docs(alert): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../usage/v7/modal/performance/mount/vue.md   | 23 ++++---------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
index 0407ee98a4e..99c7a35b8f4 100644
--- a/static/usage/v7/modal/performance/mount/vue.md
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -21,25 +21,12 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-    },
-    methods: {
-      close() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-  });
+  
+  const modal = ref();
+  
+  const close = () => modal.value.$el.dismiss();
 </script>
 ```

From 2930d51436b42e4a52516a4dcc64ab1d9c3d72d3 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:12:27 -0400
Subject: [PATCH 12/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/custom-dialogs/vue.md | 88 ++++++++-------------
 1 file changed, 34 insertions(+), 54 deletions(-)

diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
index 57362d546fc..8e2261b3dc9 100644
--- a/static/usage/v7/modal/custom-dialogs/vue.md
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -1,33 +1,4 @@
 ```html
-<style>
-  ion-modal#example-modal {
-    --width: fit-content;
-    --min-width: 250px;
-    --height: fit-content;
-    --border-radius: 6px;
-    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
-  }
-
-  ion-modal#example-modal h1 {
-    margin: 20px 20px 10px 20px;
-  }
-
-  ion-modal#example-modal ion-icon {
-    margin-right: 6px;
-
-    width: 48px;
-    height: 48px;
-
-    padding: 4px 0;
-
-    color: #aaaaaa;
-  }
-
-  ion-modal#example-modal .wrapper {
-    margin-bottom: 10px;
-  }
-</style>
-
 <template>
   <ion-header>
     <ion-toolbar>
@@ -60,7 +31,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,
@@ -74,29 +45,38 @@
     IonIcon,
   } from '@ionic/vue';
   import { personCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonList,
-      IonLabel,
-      IonIcon,
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-    setup() {
-      return { personCircle };
-    },
-  });
+  import { ref } from 'vue';
+  
+  const modal = ref();
+  
+  const dismiss = () => modal.value.$el.dismiss();
 </script>
+<style>
+  ion-modal#example-modal {
+    --width: fit-content;
+    --min-width: 250px;
+    --height: fit-content;
+    --border-radius: 6px;
+    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+  }
+
+  ion-modal#example-modal h1 {
+    margin: 20px 20px 10px 20px;
+  }
+
+  ion-modal#example-modal ion-icon {
+    margin-right: 6px;
+
+    width: 48px;
+    height: 48px;
+
+    padding: 4px 0;
+
+    color: #aaaaaa;
+  }
+
+  ion-modal#example-modal .wrapper {
+    margin-bottom: 10px;
+  }
+</style>
 ```

From 575e3f6eadd660e85266fc44e9fce878afb40c9b Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:18:11 -0400
Subject: [PATCH 13/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/inline/basic/vue.md | 56 ++++++++---------------
 1 file changed, 20 insertions(+), 36 deletions(-)

diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 2e0b1c4746c..94a7dd6500f 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -30,7 +30,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButtons,
     IonButton,
@@ -44,40 +44,24 @@
     IonLabel,
   } from '@ionic/vue';
   import { OverlayEventDetail } from '@ionic/core/components';
-  import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonInput,
-      IonLabel,
-    },
-    data() {
-      return {
-        message: 'This modal example uses triggers to automatically open a modal when the button is clicked.',
-      };
-    },
-    methods: {
-      cancel() {
-        this.$refs.modal.$el.dismiss(null, 'cancel');
-      },
-      confirm() {
-        const name = this.$refs.input.$el.value;
-        this.$refs.modal.$el.dismiss(name, 'confirm');
-      },
-      onWillDismiss(ev: CustomEvent<OverlayEventDetail>) {
-        if (ev.detail.role === 'confirm') {
-          this.message = `Hello, ${ev.detail.data}!`;
-        }
-      },
-    },
-  });
+  import { ref } from 'vue';
+  
+  const message = ref('This modal example uses triggers to automatically open a modal when the button is clicked.');
+  
+  const modal = ref();
+  const input = ref(); 
+  
+  const cancel = () => modal.value.$el.dismiss(null, 'cancel');
+  
+  const confirm = () => {
+    const name = input.value.$el.value;
+    modal.value.$el.dismiss(name, 'confirm');
+  }
+  
+  const onWillDismiss = (ev: CustomEvent<OverlayEventDetail>) => {
+    if (ev.detail.role === 'confirm') {
+      message.value = `Hello, ${ev.detail.data}!`;
+    }
+  }
 </script>
 ```

From 466ffacc7789861127762e762667635a757aef84 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:21:06 -0400
Subject: [PATCH 14/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/inline/is-open/vue.md | 22 ++++++---------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
index c09025c1967..d869af75746 100644
--- a/static/usage/v7/modal/inline/is-open/vue.md
+++ b/static/usage/v7/modal/inline/is-open/vue.md
@@ -28,22 +28,12 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButtons, IonButton, IonModal, IonHeader, IonToolbar, IonContent, IonTitle } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle },
-    data() {
-      return {
-        isOpen: false,
-      };
-    },
-    methods: {
-      setOpen(isOpen: boolean) {
-        this.isOpen = isOpen;
-      },
-    },
-  });
+  import { ref } from 'vue';
+  
+  const isOpen = ref(false);
+  
+  const setOpen = (open: boolean) => isOpen.value = open;
 </script>
 ```

From 9ed57c365f28ba54d57001fab35bc4e408a70829 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:22:16 -0400
Subject: [PATCH 15/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/sheet/auto-height/vue.md | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md
index 64eef0dd0cb..c8501ba89e6 100644
--- a/static/usage/v7/modal/sheet/auto-height/vue.md
+++ b/static/usage/v7/modal/sheet/auto-height/vue.md
@@ -28,19 +28,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-    },
-  });
 </script>
 ```

From 56f25361653b4d75fd5dda8fa0765fec4700aca9 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:24:14 -0400
Subject: [PATCH 16/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../v7/modal/sheet/background-content/vue.md  | 38 ++++---------------
 1 file changed, 7 insertions(+), 31 deletions(-)

diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
index e2647c4902c..2a22d33d244 100644
--- a/static/usage/v7/modal/sheet/background-content/vue.md
+++ b/static/usage/v7/modal/sheet/background-content/vue.md
@@ -91,36 +91,12 @@
     IonLabel,
     IonSearchbar,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel,
-      IonSearchbar,
-    },
-    data() {
-      return {
-        count: 0,
-      };
-    },
-    methods: {
-      increment() {
-        this.count++;
-      },
-      decrement() {
-        this.count--;
-      },
-    },
-  });
+  import { ref } from 'vue';
+  
+  const count = ref(0);
+  
+  const increment = count.value++;
+  
+  const decrement = count.value--:
 </script>
 ```

From f61fcc83df08bf971a008284bf2a9e65b71ffed7 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:26:57 -0400
Subject: [PATCH 17/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/sheet/background-content/vue.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
index 2a22d33d244..7143679453e 100644
--- a/static/usage/v7/modal/sheet/background-content/vue.md
+++ b/static/usage/v7/modal/sheet/background-content/vue.md
@@ -76,7 +76,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,

From a238e2d2b0cdb73df41d94002a650a3c363aab4b Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:28:14 -0400
Subject: [PATCH 18/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/sheet/basic/vue.md | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/static/usage/v7/modal/sheet/basic/vue.md b/static/usage/v7/modal/sheet/basic/vue.md
index 69ac1179b2e..ad5847eb53a 100644
--- a/static/usage/v7/modal/sheet/basic/vue.md
+++ b/static/usage/v7/modal/sheet/basic/vue.md
@@ -54,7 +54,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,
@@ -69,23 +69,5 @@
     IonLabel,
     IonSearchbar,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel,
-      IonSearchbar,
-    },
-  });
 </script>
 ```

From 75fc0554b1f9933eb1722495709c8ab16ce5f11a Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:29:24 -0400
Subject: [PATCH 19/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../usage/v7/modal/sheet/handle-behavior/vue.md   | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/static/usage/v7/modal/sheet/handle-behavior/vue.md b/static/usage/v7/modal/sheet/handle-behavior/vue.md
index e40321f52b8..6163493a9d3 100644
--- a/static/usage/v7/modal/sheet/handle-behavior/vue.md
+++ b/static/usage/v7/modal/sheet/handle-behavior/vue.md
@@ -23,20 +23,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonLabel,
-    },
-  });
 </script>
 ```

From 4a7fb422f2aaa1d09b736ef8eeb129dcf2d9abd6 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:33:35 -0400
Subject: [PATCH 20/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 .../usage/v7/modal/styling/animations/vue.md  | 74 +++++++------------
 1 file changed, 27 insertions(+), 47 deletions(-)

diff --git a/static/usage/v7/modal/styling/animations/vue.md b/static/usage/v7/modal/styling/animations/vue.md
index 8a15e8444fc..00d20038ec5 100644
--- a/static/usage/v7/modal/styling/animations/vue.md
+++ b/static/usage/v7/modal/styling/animations/vue.md
@@ -59,7 +59,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     createAnimation,
     IonButtons,
@@ -75,55 +75,35 @@
     IonImg,
     IonLabel,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
+  
+  const modal = ref();
+  
+  const dismiss = () => modal.value.$el.dismiss();
+  
+  const enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot;
 
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel,
-    },
-    setup() {
-      const enterAnimation = (baseEl: HTMLElement) => {
-        const root = baseEl.shadowRoot;
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop'))
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-        const backdropAnimation = createAnimation()
-          .addElement(root.querySelector('ion-backdrop'))
-          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+    const wrapperAnimation = createAnimation()
+      .addElement(root.querySelector('.modal-wrapper'))
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+      ]);
 
-        const wrapperAnimation = createAnimation()
-          .addElement(root.querySelector('.modal-wrapper'))
-          .keyframes([
-            { offset: 0, opacity: '0', transform: 'scale(0)' },
-            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
-          ]);
+    return createAnimation()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  };
 
-        return createAnimation()
-          .addElement(baseEl)
-          .easing('ease-out')
-          .duration(500)
-          .addAnimation([backdropAnimation, wrapperAnimation]);
-      };
-
-      const leaveAnimation = (baseEl) => {
-        return enterAnimation(baseEl).direction('reverse');
-      };
-      return { enterAnimation, leaveAnimation };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-  });
+  const leaveAnimation = (baseEl) => {
+    return enterAnimation(baseEl).direction('reverse');
+  };  
 </script>
 ```

From efa146123c64f660eb5789166ba979978f5301e7 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:35:19 -0400
Subject: [PATCH 21/24] docs(modal): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/styling/theming/vue.md | 30 ++++----------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/static/usage/v7/modal/styling/theming/vue.md b/static/usage/v7/modal/styling/theming/vue.md
index 7dc80157056..7108319c35d 100644
--- a/static/usage/v7/modal/styling/theming/vue.md
+++ b/static/usage/v7/modal/styling/theming/vue.md
@@ -77,7 +77,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButtons,
     IonButton,
@@ -92,28 +92,10 @@
     IonImg,
     IonLabel,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel,
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-  });
+  import { ref } from 'vue';
+  
+  const modal = ref();
+  
+  const dismiss = () => modal.value.$el.dismiss();
 </script>
 ```

From 057b9fbf032c45e8bdbb2f0ff31748b43c702f35 Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Wed, 10 May 2023 05:40:30 -0400
Subject: [PATCH 22/24] docs(): streamline vue usage example

Simplifies Vue usage example using  script setup syntax.
---
 static/usage/v7/modal/controller/vue/example_vue.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
index 7f9d5b03eac..84bf17a2716 100644
--- a/static/usage/v7/modal/controller/vue/example_vue.md
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -30,7 +30,7 @@
     const { data, role } = await modal.onWillDismiss();
 
     if (role === 'confirm') {
-      this.message = `Hello, ${data}!`;
+      message.value = `Hello, ${data}!`;
     }    
   }
 </script>

From 215bfcc1aa54cba648342ff65beb14e891e7e6eb Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 4 Aug 2023 17:13:03 -0400
Subject: [PATCH 23/24] Fix functionality of a couple playgrounds

---
 static/usage/v7/modal/controller/vue/modal_vue.md     |  7 ++++---
 static/usage/v7/modal/sheet/background-content/vue.md | 10 +++-------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
index 4e6231a74ef..534ba17654f 100644
--- a/static/usage/v7/modal/controller/vue/modal_vue.md
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -30,9 +30,10 @@
     IonInput,
     modalController,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-  
+  import { defineComponent, ref } from 'vue';
+  const name = ref();
+
   const cancel = () => modalController.dismiss(null, 'cancel');
-  const confirm = () => modalController.dismiss(this.name, 'confirm');
+  const confirm = () => modalController.dismiss(name.value, 'confirm');
 </script>
 ```
diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
index 7143679453e..d8dea197856 100644
--- a/static/usage/v7/modal/sheet/background-content/vue.md
+++ b/static/usage/v7/modal/sheet/background-content/vue.md
@@ -17,9 +17,9 @@
     <p>You can interact with the +/- buttons until the sheet is fully expanded.</p>
 
     <div class="counter__section">
-      <ion-button id="decrement" @click="decrement()">-</ion-button>
+      <ion-button id="decrement" @click="count--">-</ion-button>
       <p>{{count}}</p>
-      <ion-button id="increment" @click="increment()">+</ion-button>
+      <ion-button id="increment" @click="count++">+</ion-button>
     </div>
 
     <ion-modal
@@ -92,11 +92,7 @@
     IonSearchbar,
   } from '@ionic/vue';
   import { ref } from 'vue';
-  
+
   const count = ref(0);
-  
-  const increment = count.value++;
-  
-  const decrement = count.value--:
 </script>
 ```

From 7a33db826e23b829b1ee3c808b477330ebaa34b2 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 4 Aug 2023 17:39:52 -0400
Subject: [PATCH 24/24] Lint

---
 static/usage/v7/input/counter/vue.md             |  6 +++---
 .../usage/v7/modal/controller/vue/example_vue.md | 10 +++++-----
 static/usage/v7/modal/custom-dialogs/vue.md      |  4 ++--
 static/usage/v7/modal/inline/basic/vue.md        | 16 ++++++++--------
 static/usage/v7/modal/inline/is-open/vue.md      |  6 +++---
 static/usage/v7/modal/performance/mount/vue.md   |  4 ++--
 static/usage/v7/modal/styling/animations/vue.md  |  8 ++++----
 static/usage/v7/modal/styling/theming/vue.md     |  4 ++--
 8 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
index 6e3e6ee2396..1df64570da9 100644
--- a/static/usage/v7/input/counter/vue.md
+++ b/static/usage/v7/input/counter/vue.md
@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { IonInput } from '@ionic/vue'; 
-  
+  import { IonInput } from '@ionic/vue';
+
   const customFormatter = (inputLength, maxLength) => {
     return `${maxLength - inputLength} characters remaining`;
-  }
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
index 84bf17a2716..f5a2c1309cb 100644
--- a/static/usage/v7/modal/controller/vue/example_vue.md
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -17,21 +17,21 @@
   import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
   import Modal from './Modal.vue';
   import { ref } from 'vue';
-  
+
   const message = ref('This modal example uses the modalController to present and dismiss modals.');
-  
+
   const openModal = async () => {
     const modal = await modalController.create({
       component: Modal,
     });
-    
+
     modal.present();
 
     const { data, role } = await modal.onWillDismiss();
 
     if (role === 'confirm') {
       message.value = `Hello, ${data}!`;
-    }    
-  }
+    }
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
index 8e2261b3dc9..a16e82e5a17 100644
--- a/static/usage/v7/modal/custom-dialogs/vue.md
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -46,9 +46,9 @@
   } from '@ionic/vue';
   import { personCircle } from 'ionicons/icons';
   import { ref } from 'vue';
-  
+
   const modal = ref();
-  
+
   const dismiss = () => modal.value.$el.dismiss();
 </script>
 <style>
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 94a7dd6500f..2c5435b4335 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -45,23 +45,23 @@
   } from '@ionic/vue';
   import { OverlayEventDetail } from '@ionic/core/components';
   import { ref } from 'vue';
-  
+
   const message = ref('This modal example uses triggers to automatically open a modal when the button is clicked.');
-  
+
   const modal = ref();
-  const input = ref(); 
-  
+  const input = ref();
+
   const cancel = () => modal.value.$el.dismiss(null, 'cancel');
-  
+
   const confirm = () => {
     const name = input.value.$el.value;
     modal.value.$el.dismiss(name, 'confirm');
-  }
-  
+  };
+
   const onWillDismiss = (ev: CustomEvent<OverlayEventDetail>) => {
     if (ev.detail.role === 'confirm') {
       message.value = `Hello, ${ev.detail.data}!`;
     }
-  }
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
index d869af75746..19e4cb0557f 100644
--- a/static/usage/v7/modal/inline/is-open/vue.md
+++ b/static/usage/v7/modal/inline/is-open/vue.md
@@ -31,9 +31,9 @@
 <script lang="ts" setup>
   import { IonButtons, IonButton, IonModal, IonHeader, IonToolbar, IonContent, IonTitle } from '@ionic/vue';
   import { ref } from 'vue';
-  
+
   const isOpen = ref(false);
-  
-  const setOpen = (open: boolean) => isOpen.value = open;
+
+  const setOpen = (open: boolean) => (isOpen.value = open);
 </script>
 ```
diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
index 99c7a35b8f4..02dba8daf37 100644
--- a/static/usage/v7/modal/performance/mount/vue.md
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -24,9 +24,9 @@
 <script lang="ts" setup>
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
-  
+
   const modal = ref();
-  
+
   const close = () => modal.value.$el.dismiss();
 </script>
 ```
diff --git a/static/usage/v7/modal/styling/animations/vue.md b/static/usage/v7/modal/styling/animations/vue.md
index 00d20038ec5..9cc28a39ed8 100644
--- a/static/usage/v7/modal/styling/animations/vue.md
+++ b/static/usage/v7/modal/styling/animations/vue.md
@@ -76,11 +76,11 @@
     IonLabel,
   } from '@ionic/vue';
   import { ref } from 'vue';
-  
+
   const modal = ref();
-  
+
   const dismiss = () => modal.value.$el.dismiss();
-  
+
   const enterAnimation = (baseEl: HTMLElement) => {
     const root = baseEl.shadowRoot;
 
@@ -104,6 +104,6 @@
 
   const leaveAnimation = (baseEl) => {
     return enterAnimation(baseEl).direction('reverse');
-  };  
+  };
 </script>
 ```
diff --git a/static/usage/v7/modal/styling/theming/vue.md b/static/usage/v7/modal/styling/theming/vue.md
index 7108319c35d..fb5d2d6868f 100644
--- a/static/usage/v7/modal/styling/theming/vue.md
+++ b/static/usage/v7/modal/styling/theming/vue.md
@@ -93,9 +93,9 @@
     IonLabel,
   } from '@ionic/vue';
   import { ref } from 'vue';
-  
+
   const modal = ref();
-  
+
   const dismiss = () => modal.value.$el.dismiss();
 </script>
 ```