From 20981f3e0ed5a62c3637689da17615bff5d0cfcf Mon Sep 17 00:00:00 2001
From: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Date: Mon, 7 Aug 2023 11:24:31 -0400
Subject: [PATCH] docs(vue): streamline usage examples with script setup syntax
 (#2956)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
---
 static/usage/v7/alert/buttons/vue.md          | 54 +++++-------
 static/usage/v7/alert/customization/vue.md    | 27 +++---
 static/usage/v7/alert/inputs/radios/vue.md    | 43 ++++------
 .../usage/v7/alert/inputs/text-inputs/vue.md  | 51 +++++------
 .../v7/alert/presenting/controller/vue.md     | 25 ++----
 .../usage/v7/alert/presenting/isOpen/vue.md   | 17 ++--
 .../usage/v7/alert/presenting/trigger/vue.md  | 11 +--
 static/usage/v7/input/counter/vue.md          | 14 +--
 .../v7/modal/controller/vue/example_vue.md    | 34 +++-----
 .../v7/modal/controller/vue/modal_vue.md      | 19 ++--
 static/usage/v7/modal/custom-dialogs/vue.md   | 86 +++++++------------
 static/usage/v7/modal/inline/basic/vue.md     | 54 ++++--------
 static/usage/v7/modal/inline/is-open/vue.md   | 20 ++---
 .../usage/v7/modal/performance/mount/vue.md   | 21 +----
 .../usage/v7/modal/sheet/auto-height/vue.md   | 14 +--
 .../v7/modal/sheet/background-content/vue.md  | 38 ++------
 static/usage/v7/modal/sheet/basic/vue.md      | 20 +----
 .../v7/modal/sheet/handle-behavior/vue.md     | 15 +---
 .../usage/v7/modal/styling/animations/vue.md  | 72 ++++++----------
 static/usage/v7/modal/styling/theming/vue.md  | 28 ++----
 20 files changed, 210 insertions(+), 453 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>
 ```
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>
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>
 ```
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>
 ```
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>
 ```
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>
 ```
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>
 ```
diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
index c601abc2c3d..1df64570da9 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">
+<script lang="ts" setup>
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonInput },
-    methods: {
-      customFormatter(inputLength, maxLength) {
-        return `${maxLength - inputLength} characters remaining`;
-      },
-    },
-  });
+  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 1b98547ac47..f5a2c1309cb 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';
 
-  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 message = ref('This modal example uses the modalController to present and dismiss modals.');
 
-        const { data, role } = await modal.onWillDismiss();
+  const openModal = async () => {
+    const modal = await modalController.create({
+      component: Modal,
+    });
 
-        if (role === 'confirm') {
-          this.message = `Hello, ${data}!`;
-        }
-      },
-    },
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === 'confirm') {
+      message.value = `Hello, ${data}!`;
+    }
   };
 </script>
 ```
diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
index 7df58303b59..534ba17654f 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,
@@ -30,19 +30,10 @@
     IonInput,
     modalController,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
+  const name = ref();
 
-  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(name.value, 'confirm');
 </script>
 ```
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
index 57362d546fc..a16e82e5a17 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';
+  import { ref } 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 };
-    },
-  });
+  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>
 ```
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 2e0b1c4746c..2c5435b4335 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';
+  import { 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}!`;
-        }
-      },
-    },
-  });
+  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>
 ```
diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
index c09025c1967..19e4cb0557f 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';
+  import { 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;
-      },
-    },
-  });
+  const isOpen = ref(false);
+
+  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 0407ee98a4e..02dba8daf37 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>
 ```
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>
 ```
diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
index e2647c4902c..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
@@ -76,7 +76,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButton,
     IonModal,
@@ -91,36 +91,8 @@
     IonLabel,
     IonSearchbar,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } 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--;
-      },
-    },
-  });
+  const count = ref(0);
 </script>
 ```
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>
 ```
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>
 ```
diff --git a/static/usage/v7/modal/styling/animations/vue.md b/static/usage/v7/modal/styling/animations/vue.md
index 8a15e8444fc..9cc28a39ed8 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';
 
-  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 modal = ref();
 
-        const backdropAnimation = createAnimation()
-          .addElement(root.querySelector('ion-backdrop'))
-          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+  const dismiss = () => modal.value.$el.dismiss();
 
-        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 enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot;
 
-        return createAnimation()
-          .addElement(baseEl)
-          .easing('ease-out')
-          .duration(500)
-          .addAnimation([backdropAnimation, wrapperAnimation]);
-      };
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop'))
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-      const leaveAnimation = (baseEl) => {
-        return enterAnimation(baseEl).direction('reverse');
-      };
-      return { enterAnimation, leaveAnimation };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-  });
+    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]);
+  };
+
+  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 7dc80157056..fb5d2d6868f 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';
+  import { ref } 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();
-      },
-    },
-  });
+  const modal = ref();
+
+  const dismiss = () => modal.value.$el.dismiss();
 </script>
 ```