diff --git a/static/code/stackblitz/v7/vue/App.vue b/static/code/stackblitz/v7/vue/App.vue
index a66de3b24d8..3fbb68855b2 100644
--- a/static/code/stackblitz/v7/vue/App.vue
+++ b/static/code/stackblitz/v7/vue/App.vue
@@ -4,15 +4,7 @@
   </ion-app>
 </template>
 
-<script lang="ts">
-import { IonApp } from '@ionic/vue';
-
-import { defineComponent } from 'vue';
-
-import Example from './components/Example.vue';
-
-export default defineComponent({
-  name: 'App',
-  components: { IonApp, Example },
-});
+<script setup lang="ts">
+  import { IonApp } from '@ionic/vue';
+  import Example from './components/Example.vue';
 </script>
diff --git a/static/code/stackblitz/v7/vue/App.withContent.vue b/static/code/stackblitz/v7/vue/App.withContent.vue
index aa113caf3e4..9324b79998f 100644
--- a/static/code/stackblitz/v7/vue/App.withContent.vue
+++ b/static/code/stackblitz/v7/vue/App.withContent.vue
@@ -6,15 +6,7 @@
   </ion-app>
 </template>
 
-<script lang="ts">
-import { IonApp, IonContent } from '@ionic/vue';
-
-import { defineComponent } from 'vue';
-
-import Example from './components/Example.vue';
-
-export default defineComponent({
-  name: 'App',
-  components: { IonApp, IonContent, Example },
-});
+<script setup lang="ts">
+  import { IonApp, IonContent } from '@ionic/vue';
+  import Example from './components/Example.vue';
 </script>
diff --git a/static/code/stackblitz/v7/vue/env.d.ts b/static/code/stackblitz/v7/vue/env.d.ts
deleted file mode 100644
index aafef9509dd..00000000000
--- a/static/code/stackblitz/v7/vue/env.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/static/usage/v7/accordion/accessibility/animations/vue.md b/static/usage/v7/accordion/accessibility/animations/vue.md
index 05847edab7b..21f76f629fb 100644
--- a/static/usage/v7/accordion/accessibility/animations/vue.md
+++ b/static/usage/v7/accordion/accessibility/animations/vue.md
@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
-  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
+<script setup lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/accordion/basic/vue.md b/static/usage/v7/accordion/basic/vue.md
index 8ac8c6bbeec..1cca6c2afef 100644
--- a/static/usage/v7/accordion/basic/vue.md
+++ b/static/usage/v7/accordion/basic/vue.md
@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
index 5e8e8da6925..6f01efaec15 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
@@ -22,18 +22,8 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/accordion/customization/expansion-styles/vue.md b/static/usage/v7/accordion/customization/expansion-styles/vue.md
index 05f22d0d2ff..0c020847dc7 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/vue.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/vue.md
@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/customization/icons/vue.md b/static/usage/v7/accordion/customization/icons/vue.md
index 453e9963a89..0ceebf36b52 100644
--- a/static/usage/v7/accordion/customization/icons/vue.md
+++ b/static/usage/v7/accordion/customization/icons/vue.md
@@ -22,21 +22,8 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      return { caretDownCircle };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md
index c049c4b89d8..51f75eaf1e5 100644
--- a/static/usage/v7/accordion/customization/theming/vue.md
+++ b/static/usage/v7/accordion/customization/theming/vue.md
@@ -22,22 +22,9 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
   import { caretDownCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      return { caretDownCircle };
-    },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/accordion/disable/group/vue.md b/static/usage/v7/accordion/disable/group/vue.md
index 6c9e3567845..423acd3bc03 100644
--- a/static/usage/v7/accordion/disable/group/vue.md
+++ b/static/usage/v7/accordion/disable/group/vue.md
@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
-  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
+<script setup lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/accordion/disable/individual/vue.md b/static/usage/v7/accordion/disable/individual/vue.md
index dc26bc3b11f..2edc619c85f 100644
--- a/static/usage/v7/accordion/disable/individual/vue.md
+++ b/static/usage/v7/accordion/disable/individual/vue.md
@@ -22,16 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
-  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
+<script setup lang="ts">
+  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
index b082a02a1a6..90df82b9038 100644
--- a/static/usage/v7/accordion/listen-changes/vue.md
+++ b/static/usage/v7/accordion/listen-changes/vue.md
@@ -22,32 +22,17 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      const values = ['first', 'second', 'third'];
-      const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
-        const collapsedItems = values.filter((value) => value !== event.detail.value);
-        const selectedValue = event.detail.value;
+  const values = ['first', 'second', 'third'];
+  const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
-        console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
-            ', '
-          )}`
-        );
-      };
-
-      return { accordionGroupChange };
-    },
-  });
+    console.log(
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+    );
+  };
 </script>
 ```
diff --git a/static/usage/v7/accordion/multiple/vue.md b/static/usage/v7/accordion/multiple/vue.md
index dcf86fbd7d4..d971225f923 100644
--- a/static/usage/v7/accordion/multiple/vue.md
+++ b/static/usage/v7/accordion/multiple/vue.md
@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md
index 0de1be3fe91..1eff5bc7b6d 100644
--- a/static/usage/v7/accordion/readonly/group/vue.md
+++ b/static/usage/v7/accordion/readonly/group/vue.md
@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md
index b9a5daac451..ca792f75090 100644
--- a/static/usage/v7/accordion/readonly/individual/vue.md
+++ b/static/usage/v7/accordion/readonly/individual/vue.md
@@ -22,17 +22,7 @@
   </ion-accordion-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/toggle/vue.md b/static/usage/v7/accordion/toggle/vue.md
index c9fa11c0e9c..c200a77ceb8 100644
--- a/static/usage/v7/accordion/toggle/vue.md
+++ b/static/usage/v7/accordion/toggle/vue.md
@@ -24,35 +24,23 @@
   <ion-button @click="toggleAccordion()">Toggle Second Accordion</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonButton,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      const accordionGroup = ref(null);
-      const toggleAccordion = () => {
-        if (!accordionGroup.value) {
-          return;
-        }
-        const nativeEl = accordionGroup.value.$el;
+  const accordionGroup = ref(null);
 
-        if (nativeEl.value === 'second') {
-          nativeEl.value = undefined;
-        } else {
-          nativeEl.value = 'second';
-        }
-      };
+  const toggleAccordion = () => {
+    if (!accordionGroup.value) {
+      return;
+    }
+    const nativeEl = accordionGroup.value.$el;
 
-      return { accordionGroup, toggleAccordion };
-    },
-  });
+    if (nativeEl.value === 'second') {
+      nativeEl.value = undefined;
+    } else {
+      nativeEl.value = 'second';
+    }
+  };
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/controller/vue.md b/static/usage/v7/action-sheet/controller/vue.md
index 8e98e65e36a..7e7badbccff 100644
--- a/static/usage/v7/action-sheet/controller/vue.md
+++ b/static/usage/v7/action-sheet/controller/vue.md
@@ -3,44 +3,37 @@
   <ion-button @click="presentActionSheet">Open</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, actionSheetController } from '@ionic/vue';
 
-  export default {
-    components: { IonButton },
-    setup() {
-      const presentActionSheet = async () => {
-        const actionSheet = await actionSheetController.create({
-          header: 'Actions',
-          buttons: [
-            {
-              text: 'Delete',
-              role: 'destructive',
-              data: {
-                action: 'delete',
-              },
-            },
-            {
-              text: 'Share',
-              data: {
-                action: 'share',
-              },
-            },
-            {
-              text: 'Cancel',
-              role: 'cancel',
-              data: {
-                action: 'cancel',
-              },
-            },
-          ],
-        });
+  const presentActionSheet = async () => {
+    const actionSheet = await actionSheetController.create({
+      header: 'Actions',
+      buttons: [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          data: {
+            action: 'delete',
+          },
+        },
+        {
+          text: 'Share',
+          data: {
+            action: 'share',
+          },
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          data: {
+            action: 'cancel',
+          },
+        },
+      ],
+    });
 
-        await actionSheet.present();
-      };
-
-      return { presentActionSheet };
-    },
+    await actionSheet.present();
   };
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md
index 9d82efd4ea1..31567ec00cd 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/vue.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md
@@ -9,47 +9,36 @@
   ></ion-action-sheet>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { ref } from 'vue';
   import { IonActionSheet, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonActionSheet, IonButton },
-    setup() {
-      const isOpen = ref(false);
-      const actionSheetButtons = [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          data: {
-            action: 'delete',
-          },
-        },
-        {
-          text: 'Share',
-          data: {
-            action: 'share',
-          },
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          data: {
-            action: 'cancel',
-          },
-        },
-      ];
-
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
-
-      return {
-        actionSheetButtons,
-        isOpen,
-        setOpen,
-      };
+  const isOpen = ref(false);
+  const actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share',
+      },
     },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
+    },
+  ];
+
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
   };
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md
index c32a8ea9bdd..0cbfd8e98be 100644
--- a/static/usage/v7/action-sheet/inline/trigger/vue.md
+++ b/static/usage/v7/action-sheet/inline/trigger/vue.md
@@ -4,37 +4,30 @@
   <ion-action-sheet trigger="open-action-sheet" header="Actions" :buttons="actionSheetButtons"></ion-action-sheet>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonActionSheet, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonActionSheet, IonButton },
-    setup() {
-      const actionSheetButtons = [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          data: {
-            action: 'delete',
-          },
-        },
-        {
-          text: 'Share',
-          data: {
-            action: 'share',
-          },
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          data: {
-            action: 'cancel',
-          },
-        },
-      ];
-
-      return { actionSheetButtons };
+  const actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share',
+      },
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
     },
-  };
+  ];
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
index 7ac706eb8f3..cf69d7e9ead 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
@@ -22,44 +22,34 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonActionSheet, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonActionSheet, IonButton },
-    setup() {
-      const actionSheetButtons = [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          data: {
-            action: 'delete',
-          },
-        },
-        {
-          text: 'Share',
-          data: {
-            action: 'share',
-          },
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          data: {
-            action: 'cancel',
-          },
-        },
-      ];
-
-      const logResult = (event: CustomEvent) => {
-        console.log(JSON.stringify(event.detail, null, 2));
-      };
-
-      return {
-        actionSheetButtons,
-        logResult,
-      };
+  const actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share',
+      },
     },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
+    },
+  ];
+
+  const logResult = (event: CustomEvent) => {
+    console.log(JSON.stringify(event.detail, null, 2));
   };
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/vue.md b/static/usage/v7/action-sheet/theming/css-properties/vue.md
index 2f8cc168f58..2dd0bcf058a 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/vue.md
+++ b/static/usage/v7/action-sheet/theming/css-properties/vue.md
@@ -22,37 +22,30 @@
   ></ion-action-sheet>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonActionSheet, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonActionSheet, IonButton },
-    setup() {
-      const actionSheetButtons = [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          data: {
-            action: 'delete',
-          },
-        },
-        {
-          text: 'Share',
-          data: {
-            action: 'share',
-          },
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          data: {
-            action: 'cancel',
-          },
-        },
-      ];
-
-      return { actionSheetButtons };
+  const actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share',
+      },
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
     },
-  };
+  ];
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/theming/styling/vue.md b/static/usage/v7/action-sheet/theming/styling/vue.md
index c46ae0bcbd3..fb88a4d25e4 100644
--- a/static/usage/v7/action-sheet/theming/styling/vue.md
+++ b/static/usage/v7/action-sheet/theming/styling/vue.md
@@ -39,37 +39,30 @@
   ></ion-action-sheet>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonActionSheet, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonActionSheet, IonButton },
-    setup() {
-      const actionSheetButtons = [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          data: {
-            action: 'delete',
-          },
-        },
-        {
-          text: 'Share',
-          data: {
-            action: 'share',
-          },
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          data: {
-            action: 'cancel',
-          },
-        },
-      ];
-
-      return { actionSheetButtons };
+  const actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share',
+      },
+    },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
     },
-  };
+  ];
 </script>
 ```
diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
index 72b684fe4c4..80af7c14ccf 100644
--- a/static/usage/v7/alert/buttons/vue.md
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -9,7 +9,7 @@
   ></ion-alert>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonAlert, IonButton } from '@ionic/vue';
 
   const alertButtons = [
diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md
index eafb78ae012..bd88b9bb187 100644
--- a/static/usage/v7/alert/customization/vue.md
+++ b/static/usage/v7/alert/customization/vue.md
@@ -4,7 +4,7 @@
   <ion-alert trigger="present-alert" class="custom-alert" header="Are you sure?" :buttons="alertButtons"></ion-alert>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonAlert, IonButton } from '@ionic/vue';
 
   const alertButtons = [
diff --git a/static/usage/v7/alert/inputs/radios/vue.md b/static/usage/v7/alert/inputs/radios/vue.md
index c2b937c1472..a98b9cabf7e 100644
--- a/static/usage/v7/alert/inputs/radios/vue.md
+++ b/static/usage/v7/alert/inputs/radios/vue.md
@@ -9,7 +9,7 @@
   ></ion-alert>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonAlert, IonButton } from '@ionic/vue';
 
   const alertButtons = ['OK'];
diff --git a/static/usage/v7/alert/inputs/text-inputs/vue.md b/static/usage/v7/alert/inputs/text-inputs/vue.md
index fe4072e756d..775ace441df 100644
--- a/static/usage/v7/alert/inputs/text-inputs/vue.md
+++ b/static/usage/v7/alert/inputs/text-inputs/vue.md
@@ -9,7 +9,7 @@
   ></ion-alert>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonAlert, IonButton } from '@ionic/vue';
 
   const alertButtons = ['OK'];
diff --git a/static/usage/v7/alert/presenting/controller/vue.md b/static/usage/v7/alert/presenting/controller/vue.md
index ed0a4da5fc7..135c35dfd40 100644
--- a/static/usage/v7/alert/presenting/controller/vue.md
+++ b/static/usage/v7/alert/presenting/controller/vue.md
@@ -3,7 +3,7 @@
   <ion-button @click="presentAlert">Click Me</ion-button>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonButton, alertController } from '@ionic/vue';
 
   const presentAlert = async () => {
diff --git a/static/usage/v7/alert/presenting/isOpen/vue.md b/static/usage/v7/alert/presenting/isOpen/vue.md
index 1d23990668b..316984ff72e 100644
--- a/static/usage/v7/alert/presenting/isOpen/vue.md
+++ b/static/usage/v7/alert/presenting/isOpen/vue.md
@@ -11,7 +11,7 @@
   ></ion-alert>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { ref } from 'vue';
   import { IonAlert, IonButton } from '@ionic/vue';
 
diff --git a/static/usage/v7/alert/presenting/trigger/vue.md b/static/usage/v7/alert/presenting/trigger/vue.md
index 344797317dc..8a8be42fbea 100644
--- a/static/usage/v7/alert/presenting/trigger/vue.md
+++ b/static/usage/v7/alert/presenting/trigger/vue.md
@@ -10,7 +10,7 @@
   ></ion-alert>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonAlert, IonButton } from '@ionic/vue';
 
   const alertButtons = ['Action'];
diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md
index afd6c68891b..f322347cc0b 100644
--- a/static/usage/v7/animations/basic/vue.md
+++ b/static/usage/v7/animations/basic/vue.md
@@ -9,43 +9,26 @@
   <ion-button @click="stop()">Stop</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
+  import { ref, onMounted } from 'vue';
 
-  import { defineComponent, ref, onMounted } from 'vue';
+  const cardEl = ref(null);
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardEl = ref(null);
+  let animation: Animation;
 
-      let animation: Animation;
-
-      onMounted(() => {
-        animation = createAnimation()
-          .addElement(cardEl.value.$el)
-          .duration(1500)
-          .iterations(Infinity)
-          .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-          .fromTo('opacity', '1', '0.2');
-      });
-
-      const play = () => animation.play();
-      const pause = () => animation.pause();
-      const stop = () => animation.stop();
-
-      return {
-        play,
-        pause,
-        stop,
-        cardEl,
-      };
-    },
+  onMounted(() => {
+    animation = createAnimation()
+      .addElement(cardEl.value.$el)
+      .duration(1500)
+      .iterations(Infinity)
+      .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+      .fromTo('opacity', '1', '0.2');
   });
+
+  const play = () => animation.play();
+  const pause = () => animation.pause();
+  const stop = () => animation.stop();
 </script>
 ```
diff --git a/static/usage/v7/animations/before-and-after-hooks/vue.md b/static/usage/v7/animations/before-and-after-hooks/vue.md
index 3b7463a8546..5d70755b75f 100644
--- a/static/usage/v7/animations/before-and-after-hooks/vue.md
+++ b/static/usage/v7/animations/before-and-after-hooks/vue.md
@@ -9,59 +9,42 @@
   <ion-button @click="stop()">Stop</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
-
-  import { defineComponent, ref, onMounted } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardEl = ref(null);
-
-      let card: Animation | undefined;
-
-      onMounted(() => {
-        card = createAnimation()
-          .addElement(cardEl.value.$el)
-          .duration(2000)
-          .beforeStyles({
-            filter: 'invert(75%)',
-          })
-          .beforeClearStyles(['box-shadow'])
-          .afterStyles({
-            'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
-          })
-          .afterClearStyles(['filter'])
-          .keyframes([
-            { offset: 0, transform: 'scale(1)' },
-            { offset: 0.5, transform: 'scale(1.5)' },
-            { offset: 1, transform: 'scale(1)' },
-          ]);
-      });
-
-      const play = async () => {
-        await card.play();
-      };
-      const pause = () => {
-        card?.pause();
-      };
-      const stop = () => {
-        card?.stop();
-      };
-
-      return {
-        play,
-        pause,
-        stop,
-        cardEl,
-      };
-    },
+  import { ref, onMounted } from 'vue';
+
+  const cardEl = ref(null);
+
+  let card: Animation | undefined;
+
+  onMounted(() => {
+    card = createAnimation()
+      .addElement(cardEl.value.$el)
+      .duration(2000)
+      .beforeStyles({
+        filter: 'invert(75%)',
+      })
+      .beforeClearStyles(['box-shadow'])
+      .afterStyles({
+        'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+      })
+      .afterClearStyles(['filter'])
+      .keyframes([
+        { offset: 0, transform: 'scale(1)' },
+        { offset: 0.5, transform: 'scale(1.5)' },
+        { offset: 1, transform: 'scale(1)' },
+      ]);
   });
+
+  const play = async () => {
+    await card.play();
+  };
+  const pause = () => {
+    card?.pause();
+  };
+  const stop = () => {
+    card?.stop();
+  };
 </script>
 ```
diff --git a/static/usage/v7/animations/chain/vue.md b/static/usage/v7/animations/chain/vue.md
index 48166a15be2..9131918101b 100644
--- a/static/usage/v7/animations/chain/vue.md
+++ b/static/usage/v7/animations/chain/vue.md
@@ -17,84 +17,65 @@
   <ion-button @click="stop()">Stop</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
+  import { ref, onMounted } from 'vue';
 
-  import { defineComponent, ref, onMounted } from 'vue';
+  const cardAEl = ref(null);
+  const cardBEl = ref(null);
+  const cardCEl = ref(null);
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardAEl = ref(null);
-      const cardBEl = ref(null);
-      const cardCEl = ref(null);
+  let cardA: Animation | undefined;
+  let cardB: Animation | undefined;
+  let cardC: Animation | undefined;
 
-      let cardA: Animation | undefined;
-      let cardB: Animation | undefined;
-      let cardC: Animation | undefined;
+  onMounted(() => {
+    cardA = createAnimation()
+      .addElement(cardAEl.value.$el)
+      .fill('none')
+      .duration(1000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1) rotate(0)' },
+        { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+        { offset: 1, transform: 'scale(1) rotate(0)' },
+      ]);
 
-      onMounted(() => {
-        cardA = createAnimation()
-          .addElement(cardAEl.value.$el)
-          .fill('none')
-          .duration(1000)
-          .keyframes([
-            { offset: 0, transform: 'scale(1) rotate(0)' },
-            { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-            { offset: 1, transform: 'scale(1) rotate(0)' },
-          ]);
+    cardB = createAnimation()
+      .addElement(cardBEl.value.$el)
+      .fill('none')
+      .duration(1000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '1' },
+        { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+        { offset: 1, transform: 'scale(1)', opacity: '1' },
+      ]);
 
-        cardB = createAnimation()
-          .addElement(cardBEl.value.$el)
-          .fill('none')
-          .duration(1000)
-          .keyframes([
-            { offset: 0, transform: 'scale(1)', opacity: '1' },
-            { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-            { offset: 1, transform: 'scale(1)', opacity: '1' },
-          ]);
-
-        cardC = createAnimation()
-          .addElement(cardCEl.value.$el)
-          .fill('none')
-          .duration(1000)
-          .keyframes([
-            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-            { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
-          ]);
-      });
-
-      const play = async () => {
-        await cardA?.play();
-        await cardB?.play();
-        await cardC?.play();
-      };
-      const pause = () => {
-        cardA?.pause();
-        cardB?.pause();
-        cardC?.pause();
-      };
-      const stop = () => {
-        cardA?.stop();
-        cardB?.stop();
-        cardC?.stop();
-      };
-
-      return {
-        play,
-        pause,
-        stop,
-        cardAEl,
-        cardBEl,
-        cardCEl,
-      };
-    },
+    cardC = createAnimation()
+      .addElement(cardCEl.value.$el)
+      .fill('none')
+      .duration(1000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+        { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+      ]);
   });
+
+  const play = async () => {
+    await cardA?.play();
+    await cardB?.play();
+    await cardC?.play();
+  };
+  const pause = () => {
+    cardA?.pause();
+    cardB?.pause();
+    cardC?.pause();
+  };
+  const stop = () => {
+    cardA?.stop();
+    cardB?.stop();
+    cardC?.stop();
+  };
 </script>
 ```
diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
index 8ac4d91dafc..3e293d887a8 100644
--- a/static/usage/v7/animations/gesture/vue.md
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -11,84 +11,74 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/vue';
   import type { GestureDetail } from '@ionic/vue';
-  import { defineComponent, ref, onMounted } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardEl = ref(null);
-
-      onMounted(() => {
-        let initialStep = 0;
-        let started = false;
-
-        /**
-         * The track is 344px wide.
-         * The card is 100px wide.
-         * We want 16px of margin on each end of the track.
-         */
-        const MAX_TRANSLATE = 344 - 100 - 32;
-
-        const animation = createAnimation()
-          .addElement(cardEl.value.$el)
-          .duration(1000)
-          .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-
-        const gesture = createGesture({
-          el: card,
-          threshold: 0,
-          gestureName: 'card-drag',
-          onMove: (event) => onMove(event),
-          onEnd: (event) => onEnd(event),
-        });
+  import { ref, onMounted } from 'vue';
 
-        gesture.enable(true);
+  const cardEl = ref(null);
+
+  onMounted(() => {
+    let initialStep = 0;
+    let started = false;
+
+    /**
+     * The track is 344px wide.
+     * The card is 100px wide.
+     * We want 16px of margin on each end of the track.
+     */
+    const MAX_TRANSLATE = 344 - 100 - 32;
 
-        const onMove = (event: GestureDetail) => {
-          if (!started) {
-            animation.progressStart();
-            started = true;
-          }
+    const animation = createAnimation()
+      .addElement(cardEl.value.$el)
+      .duration(1000)
+      .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
 
-          animation.progressStep(getStep(event));
-        };
+    const gesture = createGesture({
+      el: cardEl.value.$el,
+      threshold: 0,
+      gestureName: 'card-drag',
+      onMove: (event) => onMove(event),
+      onEnd: (event) => onEnd(event),
+    });
 
-        const onEnd = (event: GestureDetail) => {
-          if (!started) {
-            return;
-          }
+    gesture.enable(true);
 
-          gesture.enable(false);
+    const onMove = (event: GestureDetail) => {
+      if (!started) {
+        animation.progressStart();
+        started = true;
+      }
 
-          const step = getStep(event);
-          const shouldComplete = step > 0.5;
+      animation.progressStep(getStep(event));
+    };
 
-          animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
-            gesture.enable(true);
-          });
+    const onEnd = (event: GestureDetail) => {
+      if (!started) {
+        return;
+      }
 
-          initialStep = shouldComplete ? MAX_TRANSLATE : 0;
-          started = false;
-        };
+      gesture.enable(false);
 
-        const clamp = (min: number, n: number, max: number) => {
-          return Math.max(min, Math.min(n, max));
-        };
+      const step = getStep(event);
+      const shouldComplete = step > 0.5;
 
-        const getStep = (event: GestureDetail) => {
-          const delta = initialStep + event.deltaX;
-          return clamp(0, delta / MAX_TRANSLATE, 1);
-        };
+      animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+        gesture.enable(true);
       });
 
-      return { cardEl };
-    },
+      initialStep = shouldComplete ? MAX_TRANSLATE : 0;
+      started = false;
+    };
+
+    const clamp = (min: number, n: number, max: number) => {
+      return Math.max(min, Math.min(n, max));
+    };
+
+    const getStep = (event: GestureDetail) => {
+      const delta = initialStep + event.deltaX;
+      return clamp(0, delta / MAX_TRANSLATE, 1);
+    };
   });
 </script>
 
diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
index 144eb7b8259..5f7fdae77d5 100644
--- a/static/usage/v7/animations/group/vue.md
+++ b/static/usage/v7/animations/group/vue.md
@@ -17,67 +17,48 @@
   <ion-button @click="stop()">Stop</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
+  import { ref, onMounted } from 'vue';
 
-  import { defineComponent, ref, onMounted } from 'vue';
+  const cardAEl = ref(null);
+  const cardBEl = ref(null);
+  const cardCEl = ref(null);
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardAEl = ref(null);
-      const cardBEl = ref(null);
-      const cardCEl = ref(null);
+  let animation: Animation;
 
-      let animation: Animation;
+  onMounted(() => {
+    const cardA = createAnimation()
+      .addElement(cardAEl.value.$el)
+      .keyframes([
+        { offset: 0, transform: 'scale(1) rotate(0)' },
+        { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+        { offset: 1, transform: 'scale(1) rotate(0) ' },
+      ]);
 
-      onMounted(() => {
-        const cardA = createAnimation()
-          .addElement(cardAEl.value.$el)
-          .keyframes([
-            { offset: 0, transform: 'scale(1) rotate(0)' },
-            { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-            { offset: 1, transform: 'scale(1) rotate(0) ' },
-          ]);
+    const cardB = createAnimation()
+      .addElement(cardBEl.value.$el)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '1' },
+        { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+        { offset: 1, transform: 'scale(1)', opacity: '1' },
+      ]);
 
-        const cardB = createAnimation()
-          .addElement(cardBEl.value.$el)
-          .keyframes([
-            { offset: 0, transform: 'scale(1)', opacity: '1' },
-            { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
-            { offset: 1, transform: 'scale(1)', opacity: '1' },
-          ]);
+    const cardC = createAnimation()
+      .addElement(cardCEl.value.$el)
+      .duration(5000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+        { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+      ]);
 
-        const cardC = createAnimation()
-          .addElement(cardCEl.value.$el)
-          .duration(5000)
-          .keyframes([
-            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-            { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
-            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
-          ]);
-
-        animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
-      });
-
-      const play = () => animation.play();
-      const pause = () => animation.pause();
-      const stop = () => animation.stop();
-
-      return {
-        play,
-        pause,
-        stop,
-        cardAEl,
-        cardBEl,
-        cardCEl,
-      };
-    },
+    animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
   });
+
+  const play = () => animation.play();
+  const pause = () => animation.pause();
+  const stop = () => animation.stop();
 </script>
 ```
diff --git a/static/usage/v7/animations/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md
index a0fc0e4505a..4203d03cf61 100644
--- a/static/usage/v7/animations/keyframes/vue.md
+++ b/static/usage/v7/animations/keyframes/vue.md
@@ -8,47 +8,30 @@
   <ion-button @click="stop()">Stop</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
-
-  import { defineComponent, ref, onMounted } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardEl = ref(null);
-
-      let animation: Animation;
-
-      onMounted(() => {
-        animation = createAnimation()
-          .addElement(cardEl.value.$el)
-          .duration(3000)
-          .iterations(Infinity)
-          .keyframes([
-            { offset: 0, width: '80px' },
-            { offset: 0.72, width: 'var(--width)' },
-            { offset: 1, width: '240px' },
-          ]);
-      });
-
-      const play = () => animation.play();
-      const pause = () => animation.pause();
-      const stop = () => animation.stop();
-
-      return {
-        play,
-        pause,
-        stop,
-        cardEl,
-      };
-    },
+  import { ref, onMounted } from 'vue';
+
+  const cardEl = ref(null);
+
+  let animation: Animation;
+
+  onMounted(() => {
+    animation = createAnimation()
+      .addElement(cardEl.value.$el)
+      .duration(3000)
+      .iterations(Infinity)
+      .keyframes([
+        { offset: 0, width: '80px' },
+        { offset: 0.72, width: 'var(--width)' },
+        { offset: 1, width: '240px' },
+      ]);
   });
+
+  const play = () => animation.play();
+  const pause = () => animation.pause();
+  const stop = () => animation.stop();
 </script>
 
 <style>
diff --git a/static/usage/v7/animations/modal-override/vue.md b/static/usage/v7/animations/modal-override/vue.md
index 82c05ba66e6..f8f6ba9aaee 100644
--- a/static/usage/v7/animations/modal-override/vue.md
+++ b/static/usage/v7/animations/modal-override/vue.md
@@ -21,7 +21,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonButton,
     IonButtons,
@@ -32,59 +32,37 @@
     IonTitle,
     createAnimation,
   } from '@ionic/vue';
+  import { ref } from 'vue';
 
-  import { defineComponent, ref } from 'vue';
+  const modalEl = ref(null);
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonModal,
-      IonToolbar,
-      IonTitle,
-    },
-    setup() {
-      const modalEl = ref(null);
+  const enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot;
 
-      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: HTMLElement) => {
+    return enterAnimation(baseEl).direction('reverse');
+  };
 
-      const leaveAnimation = (baseEl: HTMLElement) => {
-        return enterAnimation(baseEl).direction('reverse');
-      };
-
-      const closeModal = () => {
-        modalEl.value?.$el.dismiss();
-      };
-
-      return {
-        close,
-        modalEl,
-        closeModal,
-        enterAnimation,
-        leaveAnimation,
-      };
-    },
-  });
+  const closeModal = () => {
+    modalEl.value?.$el.dismiss();
+  };
 </script>
 ```
diff --git a/static/usage/v7/animations/preference-based/vue.md b/static/usage/v7/animations/preference-based/vue.md
index db703ca5466..75585ac4aac 100644
--- a/static/usage/v7/animations/preference-based/vue.md
+++ b/static/usage/v7/animations/preference-based/vue.md
@@ -9,44 +9,27 @@
   <ion-button @click="stop()">Stop</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
+  import { ref, onMounted } from 'vue';
 
-  import { defineComponent, ref, onMounted } from 'vue';
+  const cardEl = ref(null);
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const cardEl = ref(null);
+  let animation: Animation;
 
-      let animation: Animation;
-
-      onMounted(() => {
-        animation = createAnimation()
-          .addElement(cardEl.value.$el)
-          .duration(1500)
-          .iterations(Infinity)
-          .direction('alternate')
-          .fromTo('background', 'blue', 'var(--background)');
-      });
-
-      const play = () => animation.play();
-      const pause = () => animation.pause();
-      const stop = () => animation.stop();
-
-      return {
-        play,
-        pause,
-        stop,
-        cardEl,
-      };
-    },
+  onMounted(() => {
+    animation = createAnimation()
+      .addElement(cardEl.value.$el)
+      .duration(1500)
+      .iterations(Infinity)
+      .direction('alternate')
+      .fromTo('background', 'blue', 'var(--background)');
   });
+
+  const play = () => animation.play();
+  const pause = () => animation.pause();
+  const stop = () => animation.stop();
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/avatar/basic/vue.md b/static/usage/v7/avatar/basic/vue.md
index 5136ca90400..23dbab48299 100644
--- a/static/usage/v7/avatar/basic/vue.md
+++ b/static/usage/v7/avatar/basic/vue.md
@@ -5,12 +5,7 @@
   </ion-avatar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAvatar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/avatar/chip/vue.md b/static/usage/v7/avatar/chip/vue.md
index c872bb48de3..43dd9a0d72c 100644
--- a/static/usage/v7/avatar/chip/vue.md
+++ b/static/usage/v7/avatar/chip/vue.md
@@ -8,12 +8,7 @@
   </ion-chip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar, IonChip, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md
index 5a9ddea4499..acbde9b8d1f 100644
--- a/static/usage/v7/avatar/item/vue.md
+++ b/static/usage/v7/avatar/item/vue.md
@@ -8,12 +8,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar, IonItem, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md
index 32237336a1c..ae0f0d2f915 100644
--- a/static/usage/v7/avatar/theming/css-properties/vue.md
+++ b/static/usage/v7/avatar/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
   </ion-avatar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAvatar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/back-button/basic/vue/example_vue.md b/static/usage/v7/back-button/basic/vue/example_vue.md
index ec054a80749..b25bf4c18f1 100644
--- a/static/usage/v7/back-button/basic/vue/example_vue.md
+++ b/static/usage/v7/back-button/basic/vue/example_vue.md
@@ -3,17 +3,10 @@
   <ion-nav :root="component"></ion-nav>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
-  export default {
-    components: { IonNav },
-    data() {
-      return {
-        component: PageOne,
-      };
-    },
-  };
+  const component = PageOne;
 </script>
 ```
diff --git a/static/usage/v7/back-button/basic/vue/page_one_vue.md b/static/usage/v7/back-button/basic/vue/page_one_vue.md
index 337a6877548..96ada88a33a 100644
--- a/static/usage/v7/back-button/basic/vue/page_one_vue.md
+++ b/static/usage/v7/back-button/basic/vue/page_one_vue.md
@@ -14,17 +14,10 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonHeader, IonNavLink, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
-  export default {
-    components: { IonButton, IonContent, IonHeader, IonNavLink, IonPage, IonTitle, IonToolbar },
-    data() {
-      return {
-        component: PageTwo,
-      };
-    },
-  };
+  const component = PageTwo;
 </script>
 ```
diff --git a/static/usage/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md
index e26a6f13562..74b8e49cd61 100644
--- a/static/usage/v7/back-button/basic/vue/page_two_vue.md
+++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md
@@ -14,11 +14,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-
-  export default {
-    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar },
-  };
 </script>
 ```
diff --git a/static/usage/v7/back-button/custom/vue/example_vue.md b/static/usage/v7/back-button/custom/vue/example_vue.md
index ec054a80749..b25bf4c18f1 100644
--- a/static/usage/v7/back-button/custom/vue/example_vue.md
+++ b/static/usage/v7/back-button/custom/vue/example_vue.md
@@ -3,17 +3,10 @@
   <ion-nav :root="component"></ion-nav>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
-  export default {
-    components: { IonNav },
-    data() {
-      return {
-        component: PageOne,
-      };
-    },
-  };
+  const component = PageOne;
 </script>
 ```
diff --git a/static/usage/v7/back-button/custom/vue/page_one_vue.md b/static/usage/v7/back-button/custom/vue/page_one_vue.md
index 2702c543f5c..2c62ec03a09 100644
--- a/static/usage/v7/back-button/custom/vue/page_one_vue.md
+++ b/static/usage/v7/back-button/custom/vue/page_one_vue.md
@@ -14,17 +14,10 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
-  export default {
-    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
-    data() {
-      return {
-        component: PageTwo,
-      };
-    },
-  };
+  const component = PageTwo;
 </script>
 ```
diff --git a/static/usage/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md
index 4667abeced5..a3052e2fcdc 100644
--- a/static/usage/v7/back-button/custom/vue/page_two_vue.md
+++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md
@@ -14,15 +14,8 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
   import { caretBack } from 'ionicons/icons';
-
-  export default {
-    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
-    setup() {
-      return { caretBack };
-    },
-  };
 </script>
 ```
diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
index 247b67c098b..525dc979a69 100644
--- a/static/usage/v7/backdrop/basic/vue.md
+++ b/static/usage/v7/backdrop/basic/vue.md
@@ -22,7 +22,7 @@
     </ion-content>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonBackdrop,
     IonHeader,
@@ -33,10 +33,5 @@
     IonCheckbox,
     IonButton,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/backdrop/styling/vue.md b/static/usage/v7/backdrop/styling/vue.md
index 7e884eb2fb4..d848c38f882 100644
--- a/static/usage/v7/backdrop/styling/vue.md
+++ b/static/usage/v7/backdrop/styling/vue.md
@@ -42,12 +42,7 @@
     <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
   import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/badge/basic/vue.md b/static/usage/v7/badge/basic/vue.md
index e02b9c552e3..ef607eab9c6 100644
--- a/static/usage/v7/badge/basic/vue.md
+++ b/static/usage/v7/badge/basic/vue.md
@@ -12,12 +12,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBadge, IonItem, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/badge/theming/colors/vue.md b/static/usage/v7/badge/theming/colors/vue.md
index 77e5c1a9e97..4de614b2ed8 100644
--- a/static/usage/v7/badge/theming/colors/vue.md
+++ b/static/usage/v7/badge/theming/colors/vue.md
@@ -28,12 +28,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBadge, IonItem, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/badge/theming/css-properties/vue.md b/static/usage/v7/badge/theming/css-properties/vue.md
index 08a5d88d81e..bb50a07702a 100644
--- a/static/usage/v7/badge/theming/css-properties/vue.md
+++ b/static/usage/v7/badge/theming/css-properties/vue.md
@@ -8,13 +8,8 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBadge, IonItem, IonLabel, IonList },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/breadcrumbs/basic/vue.md b/static/usage/v7/breadcrumbs/basic/vue.md
index f665b4cb686..559b44705ca 100644
--- a/static/usage/v7/breadcrumbs/basic/vue.md
+++ b/static/usage/v7/breadcrumbs/basic/vue.md
@@ -8,12 +8,7 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-  });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
index fdd63471ed4..0c245adce1d 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -10,22 +10,14 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-    data() {
-      return {
-        maxBreadcrumbs: 4,
-      };
-    },
-    methods: {
-      expandBreadcrumbs() {
-        this.maxBreadcrumbs = undefined;
-      },
-    },
-  });
+  const maxBreadcrumbs = ref(4);
+
+  const expandBreadcrumbs = () => {
+    maxBreadcrumbs.value = undefined;
+  };
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
index 61dbebde1d7..2c03a47e410 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
@@ -41,12 +41,7 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-  });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
index a9804c52f33..bd00afb606c 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
@@ -10,12 +10,7 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-  });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
index 54368fa7213..f61693ebe11 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -23,26 +23,19 @@
   </ion-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/vue';
+  import { ref } from 'vue';
   import Popover from './Popover.vue';
 
-  export default {
-    components: { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover },
-    data() {
-      return {
-        popoverOpen: false,
-        collapsedBreadcrumbs: [],
-        event: null,
-      };
-    },
-    methods: {
-      presentPopover(e: Event) {
-        this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
-        this.event = e;
-        this.popoverOpen = true;
-      },
-    },
+  const popoverOpen = ref(false);
+  const collapsedBreadcrumbs = ref([]);
+  const event = ref(null);
+
+  const presentPopover = (e: Event) => {
+    collapsedBreadcrumbs.value = (e as CustomEvent).detail.collapsedBreadcrumbs;
+    event.value = e;
+    popoverOpen.value = true;
   };
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
index f0849705aab..a3882bfea1e 100644
--- a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
@@ -20,16 +20,8 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { arrowForwardCircle } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
-    setup() {
-      return { arrowForwardCircle };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
index 2e1634143f6..bede7f886a4 100644
--- a/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
@@ -41,16 +41,8 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { camera, film, flash, home } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel },
-    setup() {
-      return { camera, film, flash, home };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/vue.md b/static/usage/v7/breadcrumbs/theming/colors/vue.md
index 357d76b7422..f45d167a9f8 100644
--- a/static/usage/v7/breadcrumbs/theming/colors/vue.md
+++ b/static/usage/v7/breadcrumbs/theming/colors/vue.md
@@ -8,12 +8,7 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-  });
 </script>
 ```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/vue.md b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
index 119ed6e5a0a..2b26b288cc4 100644
--- a/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
@@ -8,13 +8,8 @@
   </ion-breadcrumbs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/button/basic/vue.md b/static/usage/v7/button/basic/vue.md
index dbd787691fb..9c61bc538fd 100644
--- a/static/usage/v7/button/basic/vue.md
+++ b/static/usage/v7/button/basic/vue.md
@@ -4,12 +4,7 @@
   <ion-button :disabled="true">Disabled</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/expand/vue.md b/static/usage/v7/button/expand/vue.md
index f67d93ecdef..5d119164210 100644
--- a/static/usage/v7/button/expand/vue.md
+++ b/static/usage/v7/button/expand/vue.md
@@ -4,12 +4,7 @@
   <ion-button expand="full">Full</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/fill/vue.md b/static/usage/v7/button/fill/vue.md
index 4b965ed3582..7fbe17c866c 100644
--- a/static/usage/v7/button/fill/vue.md
+++ b/static/usage/v7/button/fill/vue.md
@@ -6,12 +6,7 @@
   <ion-button fill="solid">Solid</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md
index 03d8648c878..a3e0abfc20d 100644
--- a/static/usage/v7/button/icons/vue.md
+++ b/static/usage/v7/button/icons/vue.md
@@ -15,16 +15,8 @@
   </ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { star } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonButton, IonIcon },
-    setup() {
-      return { star };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/shape/vue.md b/static/usage/v7/button/shape/vue.md
index 6db047c9532..615b0e51a31 100644
--- a/static/usage/v7/button/shape/vue.md
+++ b/static/usage/v7/button/shape/vue.md
@@ -4,12 +4,7 @@
   <ion-button shape="round">Round</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/size/vue.md b/static/usage/v7/button/size/vue.md
index 02a27f22d1d..38773138035 100644
--- a/static/usage/v7/button/size/vue.md
+++ b/static/usage/v7/button/size/vue.md
@@ -5,12 +5,7 @@
   <ion-button size="large">Large</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/text-wrapping/vue.md b/static/usage/v7/button/text-wrapping/vue.md
index 3462f7357ea..c35b49d5f44 100644
--- a/static/usage/v7/button/text-wrapping/vue.md
+++ b/static/usage/v7/button/text-wrapping/vue.md
@@ -7,12 +7,7 @@
   >
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/theming/colors/vue.md b/static/usage/v7/button/theming/colors/vue.md
index 7fee983d696..67fa0860f7e 100644
--- a/static/usage/v7/button/theming/colors/vue.md
+++ b/static/usage/v7/button/theming/colors/vue.md
@@ -12,12 +12,7 @@
   <ion-button color="dark">Dark</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/button/theming/css-properties/vue.md b/static/usage/v7/button/theming/css-properties/vue.md
index 0243821d67f..00280cd4cd2 100644
--- a/static/usage/v7/button/theming/css-properties/vue.md
+++ b/static/usage/v7/button/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
   <ion-button>Custom Button</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/buttons/basic/vue.md b/static/usage/v7/buttons/basic/vue.md
index 3da668fcb20..56910d861f3 100644
--- a/static/usage/v7/buttons/basic/vue.md
+++ b/static/usage/v7/buttons/basic/vue.md
@@ -8,12 +8,7 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonButtons, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/buttons/placement/vue.md b/static/usage/v7/buttons/placement/vue.md
index dc0217fc146..de7bee33b0d 100644
--- a/static/usage/v7/buttons/placement/vue.md
+++ b/static/usage/v7/buttons/placement/vue.md
@@ -21,12 +21,7 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonButtons, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md
index 60b04a067da..53cb7f27ebb 100644
--- a/static/usage/v7/buttons/types/vue.md
+++ b/static/usage/v7/buttons/types/vue.md
@@ -74,16 +74,8 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
-    setup() {
-      return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/card/basic/vue.md b/static/usage/v7/card/basic/vue.md
index aa44d9f0931..de96e80972a 100644
--- a/static/usage/v7/card/basic/vue.md
+++ b/static/usage/v7/card/basic/vue.md
@@ -12,12 +12,7 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/card/buttons/vue.md b/static/usage/v7/card/buttons/vue.md
index 2266589135f..841239e7a1f 100644
--- a/static/usage/v7/card/buttons/vue.md
+++ b/static/usage/v7/card/buttons/vue.md
@@ -15,12 +15,7 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/card/list/vue.md b/static/usage/v7/card/list/vue.md
index 1a565483588..9c96e50c10f 100644
--- a/static/usage/v7/card/list/vue.md
+++ b/static/usage/v7/card/list/vue.md
@@ -39,13 +39,8 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/card/media/vue.md b/static/usage/v7/card/media/vue.md
index 472b8a7d991..c411a4d92eb 100644
--- a/static/usage/v7/card/media/vue.md
+++ b/static/usage/v7/card/media/vue.md
@@ -13,12 +13,7 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/card/theming/colors/vue.md b/static/usage/v7/card/theming/colors/vue.md
index e0070961be8..863541a0227 100644
--- a/static/usage/v7/card/theming/colors/vue.md
+++ b/static/usage/v7/card/theming/colors/vue.md
@@ -82,12 +82,7 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/card/theming/css-properties/vue.md b/static/usage/v7/card/theming/css-properties/vue.md
index e2db7992d85..87c9e6b3f55 100644
--- a/static/usage/v7/card/theming/css-properties/vue.md
+++ b/static/usage/v7/card/theming/css-properties/vue.md
@@ -12,13 +12,8 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/checkbox/alignment/vue.md b/static/usage/v7/checkbox/alignment/vue.md
index 4dffcd383aa..0290b1791e7 100644
--- a/static/usage/v7/checkbox/alignment/vue.md
+++ b/static/usage/v7/checkbox/alignment/vue.md
@@ -11,14 +11,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonCheckbox,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md
index fc8c1ff781f..27b27767c66 100644
--- a/static/usage/v7/checkbox/basic/vue.md
+++ b/static/usage/v7/checkbox/basic/vue.md
@@ -3,12 +3,7 @@
   <ion-checkbox>I agree to the terms and conditions</ion-checkbox>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox },
-  });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md
index ff87a637bd6..d070624dae3 100644
--- a/static/usage/v7/checkbox/indeterminate/vue.md
+++ b/static/usage/v7/checkbox/indeterminate/vue.md
@@ -3,12 +3,7 @@
   <ion-checkbox :indeterminate="true">Indeterminate checkbox</ion-checkbox>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox },
-  });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md
index ed34f0dcdc7..e36b7e502b9 100644
--- a/static/usage/v7/checkbox/justify/vue.md
+++ b/static/usage/v7/checkbox/justify/vue.md
@@ -15,12 +15,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/label-link/vue.md b/static/usage/v7/checkbox/label-link/vue.md
index 7c4c44d77b5..c7a28dad3dd 100644
--- a/static/usage/v7/checkbox/label-link/vue.md
+++ b/static/usage/v7/checkbox/label-link/vue.md
@@ -3,12 +3,7 @@
   <ion-checkbox>I agree to the <a href="#" @click="$event.stopPropagation()">terms and conditions</a></ion-checkbox>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox },
-  });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
index 3530731da53..4652f8c075b 100644
--- a/static/usage/v7/checkbox/label-placement/vue.md
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -15,12 +15,7 @@
   <ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox },
-  });
 </script>
 ```
diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md
index 802cfa40b25..f582a7b2390 100644
--- a/static/usage/v7/checkbox/theming/css-properties/vue.md
+++ b/static/usage/v7/checkbox/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
   <ion-checkbox>Themed checkbox</ion-checkbox>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/chip/basic/vue.md b/static/usage/v7/chip/basic/vue.md
index 69634b44d3e..8e9a474ae51 100644
--- a/static/usage/v7/chip/basic/vue.md
+++ b/static/usage/v7/chip/basic/vue.md
@@ -5,12 +5,7 @@
   <ion-chip :outline="true">Outline</ion-chip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonChip } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonChip },
-  });
 </script>
 ```
diff --git a/static/usage/v7/chip/slots/vue.md b/static/usage/v7/chip/slots/vue.md
index 76f0bbfcf48..dc7288f8e99 100644
--- a/static/usage/v7/chip/slots/vue.md
+++ b/static/usage/v7/chip/slots/vue.md
@@ -15,20 +15,8 @@
   </ion-chip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/vue';
   import { close, closeCircle, pin } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonChip, IonAvatar, IonLabel, IonIcon },
-    setup() {
-      return {
-        close,
-        closeCircle,
-        pin,
-      };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/chip/theming/colors/vue.md b/static/usage/v7/chip/theming/colors/vue.md
index 55221ac5115..0dbe1871c5f 100644
--- a/static/usage/v7/chip/theming/colors/vue.md
+++ b/static/usage/v7/chip/theming/colors/vue.md
@@ -12,12 +12,7 @@
   <ion-chip color="dark">Dark</ion-chip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonChip } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonChip },
-  });
 </script>
 ```
diff --git a/static/usage/v7/chip/theming/css-properties/vue.md b/static/usage/v7/chip/theming/css-properties/vue.md
index 7195787bd52..2a678970425 100644
--- a/static/usage/v7/chip/theming/css-properties/vue.md
+++ b/static/usage/v7/chip/theming/css-properties/vue.md
@@ -10,12 +10,7 @@
   <ion-chip>Default</ion-chip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonChip } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonChip },
-  });
 </script>
 ```
diff --git a/static/usage/v7/content/basic/vue.md b/static/usage/v7/content/basic/vue.md
index 84e2e35470e..1e40cc35777 100644
--- a/static/usage/v7/content/basic/vue.md
+++ b/static/usage/v7/content/basic/vue.md
@@ -12,12 +12,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent },
-  });
 </script>
 ```
diff --git a/static/usage/v7/content/fixed/vue.md b/static/usage/v7/content/fixed/vue.md
index 31d3f7cd33c..e32e09affe0 100644
--- a/static/usage/v7/content/fixed/vue.md
+++ b/static/usage/v7/content/fixed/vue.md
@@ -54,13 +54,8 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md
index 3de93600da7..5f662a566e4 100644
--- a/static/usage/v7/content/fullscreen/vue.md
+++ b/static/usage/v7/content/fullscreen/vue.md
@@ -61,13 +61,8 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md
index dc914aee8f5..8b8559cc790 100644
--- a/static/usage/v7/content/header-footer/vue.md
+++ b/static/usage/v7/content/header-footer/vue.md
@@ -22,12 +22,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md
index bc1b5daaa41..0d917636702 100644
--- a/static/usage/v7/content/scroll-events/vue.md
+++ b/static/usage/v7/content/scroll-events/vue.md
@@ -58,23 +58,19 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent },
-    methods: {
-      handleScrollStart() {
-        console.log('scroll start');
-      },
-      handleScroll(event: CustomEvent) {
-        console.log('scroll', JSON.stringify(event.detail));
-      },
-      handleScrollEnd() {
-        console.log('scroll end');
-      },
-    },
-  });
+  const handleScrollStart = () => {
+    console.log('scroll start');
+  };
+
+  const handleScroll = (event: CustomEvent) => {
+    console.log('scroll', JSON.stringify(event.detail));
+  };
+
+  const handleScrollEnd = () => {
+    console.log('scroll end');
+  };
 </script>
 ```
diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md
index 5ac6e8ee1fc..168bcf3c99c 100644
--- a/static/usage/v7/content/scroll-methods/vue.md
+++ b/static/usage/v7/content/scroll-methods/vue.md
@@ -55,24 +55,22 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonContent },
-    methods: {
-      scrollToBottom() {
-        // Passing a duration to the method makes it so the scroll slowly
-        // goes to the bottom instead of instantly
-        this.$refs.content.$el.scrollToBottom(500);
-      },
-      scrollToTop() {
-        // Passing a duration to the method makes it so the scroll slowly
-        // goes to the top instead of instantly
-        this.$refs.content.$el.scrollToTop(500);
-      },
-    },
-  });
+  const content = ref();
+
+  const scrollToBottom = () => {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    content.value.$el.scrollToBottom(500);
+  };
+
+  const scrollToTop = () => {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the top instead of instantly
+    content.value.$el.scrollToTop(500);
+  };
 </script>
 ```
diff --git a/static/usage/v7/content/theming/colors/vue.md b/static/usage/v7/content/theming/colors/vue.md
index 1bbcc99834e..9020969c881 100644
--- a/static/usage/v7/content/theming/colors/vue.md
+++ b/static/usage/v7/content/theming/colors/vue.md
@@ -38,12 +38,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent },
-  });
 </script>
 ```
diff --git a/static/usage/v7/content/theming/css-properties/vue.md b/static/usage/v7/content/theming/css-properties/vue.md
index 09322711dfd..f28e211278f 100644
--- a/static/usage/v7/content/theming/css-properties/vue.md
+++ b/static/usage/v7/content/theming/css-properties/vue.md
@@ -12,13 +12,8 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/content/theming/css-shadow-parts/vue.md b/static/usage/v7/content/theming/css-shadow-parts/vue.md
index 129f3ec615a..aec87ce684a 100644
--- a/static/usage/v7/content/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/content/theming/css-shadow-parts/vue.md
@@ -12,13 +12,8 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index 18c5e8c246e..f13dc57a31f 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -5,15 +5,8 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-    },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md
index a595c27e409..5b570b0a823 100644
--- a/static/usage/v7/datetime-button/basic/vue.md
+++ b/static/usage/v7/datetime-button/basic/vue.md
@@ -7,12 +7,7 @@
   </ion-modal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime, IonDatetimeButton, IonModal },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime-button/format-options/vue.md b/static/usage/v7/datetime-button/format-options/vue.md
index 5bb7f801d98..942808b08e2 100644
--- a/static/usage/v7/datetime-button/format-options/vue.md
+++ b/static/usage/v7/datetime-button/format-options/vue.md
@@ -12,9 +12,8 @@
   </ion-modal>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
   const formatOptions = {
     date: {
diff --git a/static/usage/v7/datetime/basic/vue.md b/static/usage/v7/datetime/basic/vue.md
index cc68b9ab44a..6a0616d1f19 100644
--- a/static/usage/v7/datetime/basic/vue.md
+++ b/static/usage/v7/datetime/basic/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
index fddaa53fac1..cd41ec43133 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime :show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
index 4d1408b7ab4..36d9fd61a63 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
@@ -9,19 +9,13 @@
   </ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButtons, IonButton, IonDatetime } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButtons, IonButton, IonDatetime },
-    setup() {
-      const datetime = ref();
-      const reset = () => datetime.value.$el.reset();
-      const cancel = () => datetime.value.$el.cancel();
-      const confirm = () => datetime.value.$el.confirm();
-      return { datetime, reset, cancel, confirm };
-    },
-  });
+  const datetime = ref();
+  const reset = () => datetime.value.$el.reset();
+  const cancel = () => datetime.value.$el.cancel();
+  const confirm = () => datetime.value.$el.confirm();
 </script>
 ```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
index 196d89fbf4d..512b86560ba 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime :show-default-buttons="true"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/vue.md b/static/usage/v7/datetime/date-constraints/advanced/vue.md
index afd310f0867..781ef1678ec 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/vue.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/vue.md
@@ -3,26 +3,18 @@
   <ion-datetime :is-date-enabled="isWeekday"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonDatetime },
-    setup() {
-      const isWeekday = (dateString: string) => {
-        const date = new Date(dateString);
-        const utcDay = date.getUTCDay();
+  const isWeekday = (dateString: string) => {
+    const date = new Date(dateString);
+    const utcDay = date.getUTCDay();
 
-        /**
-         * Date will be enabled if it is not
-         * Sunday or Saturday
-         */
-        return utcDay !== 0 && utcDay !== 6;
-      };
-
-      return { isWeekday };
-    },
-  });
+    /**
+     * Date will be enabled if it is not
+     * Sunday or Saturday
+     */
+    return utcDay !== 0 && utcDay !== 6;
+  };
 </script>
 ```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/vue.md b/static/usage/v7/datetime/date-constraints/max-min/vue.md
index 32fec242e0a..97903417425 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/vue.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/date-constraints/values/vue.md b/static/usage/v7/datetime/date-constraints/values/vue.md
index cf1d0eaaa89..ce95f7efae8 100644
--- a/static/usage/v7/datetime/date-constraints/values/vue.md
+++ b/static/usage/v7/datetime/date-constraints/values/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/format-options/vue.md b/static/usage/v7/datetime/format-options/vue.md
index e24444436fc..2d5ec106173 100644
--- a/static/usage/v7/datetime/format-options/vue.md
+++ b/static/usage/v7/datetime/format-options/vue.md
@@ -5,9 +5,8 @@
   </ion-datetime>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
   const formatOptions = {
     time: { hour: '2-digit', minute: '2-digit' },
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
index 408f58f2833..0fb4b6e6f42 100644
--- a/static/usage/v7/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -3,38 +3,34 @@
   <ion-datetime presentation="date" value="2023-01-01" :highlighted-dates="highlightedDates"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonDatetime },
-    setup() {
-      const highlightedDates = [
-        {
-          date: '2023-01-05',
-          textColor: '#800080',
-          backgroundColor: '#ffc0cb',
-        },
-        {
-          date: '2023-01-10',
-          textColor: '#09721b',
-          backgroundColor: '#c8e5d0',
-        },
-        {
-          date: '2023-01-20',
-          textColor: 'var(--ion-color-secondary-contrast)',
-          backgroundColor: 'var(--ion-color-secondary)',
-        },
-        {
-          date: '2023-01-23',
-          textColor: 'rgb(68, 10, 184)',
-          backgroundColor: 'rgb(211, 200, 229)',
-        },
-      ];
-
-      return { highlightedDates };
+  const highlightedDates = [
+    {
+      date: '2023-01-05',
+      textColor: '#800080',
+      backgroundColor: '#ffc0cb',
+      border: '1px solid #e91e63',
+    },
+    {
+      date: '2023-01-10',
+      textColor: '#09721b',
+      backgroundColor: '#c8e5d0',
+      border: '1px solid #4caf50',
+    },
+    {
+      date: '2023-01-20',
+      textColor: 'var(--ion-color-secondary)',
+      backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+      border: '1px solid var(--ion-color-secondary-shade)',
+    },
+    {
+      date: '2023-01-23',
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)',
+      border: '1px solid rgb(103, 58, 183)',
     },
-  });
+  ];
 </script>
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
index e916b2cef1b..19808c29f03 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -3,36 +3,30 @@
   <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonDatetime },
-    setup() {
-      const highlightedDates = (isoString) => {
-        const date = new Date(isoString);
-        const utcDay = date.getUTCDate();
+  const highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
 
-        if (utcDay % 5 === 0) {
-          return {
-            textColor: '#800080',
-            backgroundColor: '#ffc0cb',
-          };
-        }
-
-        if (utcDay % 3 === 0) {
-          return {
-            textColor: 'var(--ion-color-secondary-contrast)',
-            backgroundColor: 'var(--ion-color-secondary)',
-          };
-        }
+    if (utcDay % 5 === 0) {
+      return {
+        textColor: '#800080',
+        backgroundColor: '#ffc0cb',
+        border: '1px solid #e91e63',
+      };
+    }
 
-        return undefined;
+    if (utcDay % 3 === 0) {
+      return {
+        textColor: 'var(--ion-color-secondary)',
+        backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+        border: '1px solid var(--ion-color-secondary-shade)',
       };
+    }
 
-      return { highlightedDates };
-    },
-  });
+    return undefined;
+  };
 </script>
 ```
diff --git a/static/usage/v7/datetime/localization/custom-locale/vue.md b/static/usage/v7/datetime/localization/custom-locale/vue.md
index 8a3712a255e..741b602b907 100644
--- a/static/usage/v7/datetime/localization/custom-locale/vue.md
+++ b/static/usage/v7/datetime/localization/custom-locale/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime locale="es-ES"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/vue.md b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
index 71c24fd72be..f5fa2e15976 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/vue.md
+++ b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime :first-day-of-week="1"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/vue.md b/static/usage/v7/datetime/localization/hour-cycle/vue.md
index b8767c6c2db..ac5ac874a86 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/vue.md
+++ b/static/usage/v7/datetime/localization/hour-cycle/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/vue.md b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
index a0181dc8e2d..c795de9de68 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/localization/time-label/vue.md b/static/usage/v7/datetime/localization/time-label/vue.md
index 37af973ee32..0fb5e3ec49d 100644
--- a/static/usage/v7/datetime/localization/time-label/vue.md
+++ b/static/usage/v7/datetime/localization/time-label/vue.md
@@ -5,12 +5,7 @@
   </ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/multiple/vue.md b/static/usage/v7/datetime/multiple/vue.md
index 837fc7e2f9f..f4216f64646 100644
--- a/static/usage/v7/datetime/multiple/vue.md
+++ b/static/usage/v7/datetime/multiple/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime presentation="date" :multiple="true" :value="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/presentation/date/vue.md b/static/usage/v7/datetime/presentation/date/vue.md
index b686297a867..a57e823757f 100644
--- a/static/usage/v7/datetime/presentation/date/vue.md
+++ b/static/usage/v7/datetime/presentation/date/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime presentation="date"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/vue.md b/static/usage/v7/datetime/presentation/month-and-year/vue.md
index 01744a290fe..fd61878679d 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/vue.md
+++ b/static/usage/v7/datetime/presentation/month-and-year/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime presentation="month-year"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/presentation/time/vue.md b/static/usage/v7/datetime/presentation/time/vue.md
index 7e01bc7d730..581215e8e83 100644
--- a/static/usage/v7/datetime/presentation/time/vue.md
+++ b/static/usage/v7/datetime/presentation/time/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime presentation="time"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/presentation/wheel/vue.md b/static/usage/v7/datetime/presentation/wheel/vue.md
index c1055e8cfb7..db4a28456ef 100644
--- a/static/usage/v7/datetime/presentation/wheel/vue.md
+++ b/static/usage/v7/datetime/presentation/wheel/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime presentation="date-time" :prefer-wheel="true"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/styling/calendar-days/vue.md b/static/usage/v7/datetime/styling/calendar-days/vue.md
index 98031201d7c..627a40123ae 100644
--- a/static/usage/v7/datetime/styling/calendar-days/vue.md
+++ b/static/usage/v7/datetime/styling/calendar-days/vue.md
@@ -3,40 +3,29 @@
   <ion-datetime presentation="date" :value="datetime"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonDatetime,
-    },
-    setup() {
-      let datetime = ref('');
+  let datetime = ref('');
 
-      const date = new Date();
+  const date = new Date();
 
-      // Set the value of the datetime to 2 days
-      // before the current day
-      let dayChange = -2;
+  // Set the value of the datetime to 2 days
+  // before the current day
+  let dayChange = -2;
 
-      // If the day we are going to set the value to
-      // is in the previous month then set the day 2 days
-      // later instead so it remains in the same month
-      if (date.getDate() + dayChange <= 0) {
-        dayChange = -dayChange;
-      }
-
-      // Set the value of the datetime to the day
-      // calculated above
-      date.setDate(date.getDate() + dayChange);
-      datetime = date.toISOString();
+  // If the day we are going to set the value to
+  // is in the previous month then set the day 2 days
+  // later instead so it remains in the same month
+  if (date.getDate() + dayChange <= 0) {
+    dayChange = -dayChange;
+  }
 
-      return {
-        datetime,
-      };
-    },
-  });
+  // Set the value of the datetime to the day
+  // calculated above
+  date.setDate(date.getDate() + dayChange);
+  datetime = date.toISOString();
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/datetime/styling/global-theming/vue.md b/static/usage/v7/datetime/styling/global-theming/vue.md
index 32e682cfbc9..248c3840085 100644
--- a/static/usage/v7/datetime/styling/global-theming/vue.md
+++ b/static/usage/v7/datetime/styling/global-theming/vue.md
@@ -3,13 +3,8 @@
   <ion-datetime color="rose"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/datetime/styling/wheel-styling/vue.md b/static/usage/v7/datetime/styling/wheel-styling/vue.md
index a90c729af63..5fc322cce76 100644
--- a/static/usage/v7/datetime/styling/wheel-styling/vue.md
+++ b/static/usage/v7/datetime/styling/wheel-styling/vue.md
@@ -3,13 +3,8 @@
   <ion-datetime presentation="date" :prefer-wheel="true"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/theming/vue.md
index 32e682cfbc9..248c3840085 100644
--- a/static/usage/v7/datetime/theming/vue.md
+++ b/static/usage/v7/datetime/theming/vue.md
@@ -3,13 +3,8 @@
   <ion-datetime color="rose"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/datetime/title/customizing-title/vue.md b/static/usage/v7/datetime/title/customizing-title/vue.md
index cb633931dba..5fbaa8b3962 100644
--- a/static/usage/v7/datetime/title/customizing-title/vue.md
+++ b/static/usage/v7/datetime/title/customizing-title/vue.md
@@ -5,12 +5,7 @@
   </ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/title/showing-default-title/vue.md b/static/usage/v7/datetime/title/showing-default-title/vue.md
index 7a6e48f7214..472da1096bc 100644
--- a/static/usage/v7/datetime/title/showing-default-title/vue.md
+++ b/static/usage/v7/datetime/title/showing-default-title/vue.md
@@ -3,12 +3,7 @@
   <ion-datetime :show-default-title="true"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/fab/basic/vue.md b/static/usage/v7/fab/basic/vue.md
index dc16daae992..fa9261d132d 100644
--- a/static/usage/v7/fab/basic/vue.md
+++ b/static/usage/v7/fab/basic/vue.md
@@ -7,16 +7,8 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
   import { add } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFab, IonFabButton, IonIcon },
-    setup() {
-      return { add };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/fab/button-sizing/vue.md b/static/usage/v7/fab/button-sizing/vue.md
index 5ea6d8adb56..f27ad915781 100644
--- a/static/usage/v7/fab/button-sizing/vue.md
+++ b/static/usage/v7/fab/button-sizing/vue.md
@@ -18,16 +18,8 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
   import { add, colorPalette, document, globe } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFab, IonFabButton, IonFabList, IonIcon },
-    setup() {
-      return { add, colorPalette, document, globe };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/fab/list-side/vue.md b/static/usage/v7/fab/list-side/vue.md
index 459ea75e845..80255d2dc95 100644
--- a/static/usage/v7/fab/list-side/vue.md
+++ b/static/usage/v7/fab/list-side/vue.md
@@ -33,16 +33,8 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
   import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFab, IonFabButton, IonFabList, IonIcon },
-    setup() {
-      return { add, chevronBack, chevronDown, chevronForward, chevronUp };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/fab/positioning/vue.md b/static/usage/v7/fab/positioning/vue.md
index baa2f82e882..ed3a23c9cbb 100644
--- a/static/usage/v7/fab/positioning/vue.md
+++ b/static/usage/v7/fab/positioning/vue.md
@@ -59,7 +59,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/vue';
   import {
     chevronDownCircle,
@@ -69,13 +69,5 @@
     document,
     globe,
   } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar },
-    setup() {
-      return { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
index 1127a3128db..bccc14b5c8f 100644
--- a/static/usage/v7/fab/safe-area/vue.md
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -7,21 +7,9 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { add } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: {
-      IonFab,
-      IonFabButton,
-      IonIcon,
-    },
-    setup() {
-      return { add };
-    },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/fab/theming/colors/vue.md b/static/usage/v7/fab/theming/colors/vue.md
index f37cb9707b3..e90266e1c19 100644
--- a/static/usage/v7/fab/theming/colors/vue.md
+++ b/static/usage/v7/fab/theming/colors/vue.md
@@ -33,16 +33,8 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
   import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFab, IonFabButton, IonFabList, IonIcon },
-    setup() {
-      return { add, chevronBack, chevronDown, chevronForward, chevronUp };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/vue.md b/static/usage/v7/fab/theming/css-custom-properties/vue.md
index 00d3b6c87f8..e600c1550b8 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/vue.md
+++ b/static/usage/v7/fab/theming/css-custom-properties/vue.md
@@ -18,17 +18,9 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
   import { add, colorPalette, document, globe } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFab, IonFabButton, IonFabList, IonIcon },
-    setup() {
-      return { add, colorPalette, document, globe };
-    },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/vue.md b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
index aee0d929a06..972bf430cc9 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
@@ -18,17 +18,9 @@
   </ion-fab>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/vue';
   import { add, colorPalette, document, globe } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFab, IonFabButton, IonFabList, IonIcon },
-    setup() {
-      return { add, colorPalette, document, globe };
-    },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/footer/basic/vue.md b/static/usage/v7/footer/basic/vue.md
index ed20057150d..b37a0a96dde 100644
--- a/static/usage/v7/footer/basic/vue.md
+++ b/static/usage/v7/footer/basic/vue.md
@@ -10,12 +10,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/footer/custom-scroll-target/vue.md b/static/usage/v7/footer/custom-scroll-target/vue.md
index b85998db4cb..9aa360476fd 100644
--- a/static/usage/v7/footer/custom-scroll-target/vue.md
+++ b/static/usage/v7/footer/custom-scroll-target/vue.md
@@ -69,13 +69,8 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/footer/fade/vue.md b/static/usage/v7/footer/fade/vue.md
index 757e78f59da..b08b461fb2e 100644
--- a/static/usage/v7/footer/fade/vue.md
+++ b/static/usage/v7/footer/fade/vue.md
@@ -67,12 +67,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/footer/no-border/vue.md b/static/usage/v7/footer/no-border/vue.md
index 9a3eccff15a..53a4aa171a7 100644
--- a/static/usage/v7/footer/no-border/vue.md
+++ b/static/usage/v7/footer/no-border/vue.md
@@ -10,12 +10,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/footer/translucent/vue.md b/static/usage/v7/footer/translucent/vue.md
index 5d5a0e1497f..669bcd31de9 100644
--- a/static/usage/v7/footer/translucent/vue.md
+++ b/static/usage/v7/footer/translucent/vue.md
@@ -67,12 +67,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/gestures/basic/vue.md b/static/usage/v7/gestures/basic/vue.md
index 2526d8bff15..0ab757dcbea 100644
--- a/static/usage/v7/gestures/basic/vue.md
+++ b/static/usage/v7/gestures/basic/vue.md
@@ -24,59 +24,44 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonCard, IonCardContent, createGesture } from '@ionic/vue';
   import type { GestureDetail } from '@ionic/vue';
+  import { ref, onMounted } from 'vue';
 
-  import { defineComponent, ref, onMounted } from 'vue';
+  const card = ref(null);
+  const debug = ref(null);
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const card = ref(null);
-      const debug = ref(null);
+  onMounted(() => {
+    const gesture = createGesture({
+      el: card.value.$el.closest('ion-content'),
+      onStart: () => onStart(),
+      onMove: (detail) => onMove(detail),
+      onEnd: () => onEnd(),
+      gestureName: 'example',
+    });
 
-      onMounted(() => {
-        const gesture = createGesture({
-          el: card.value.$el.closest('ion-content'),
-          onStart: () => onStart(),
-          onMove: (detail) => onMove(detail),
-          onEnd: () => onEnd(),
-          gestureName: 'example',
-        });
-
-        gesture.enable();
-      });
-
-      const onStart = () => {
-        card.value?.$el.classList.add('active');
-      };
+    gesture.enable();
+  });
 
-      const onMove = (detail: GestureDetail) => {
-        const { type, currentX, deltaX, velocityX } = detail;
+  const onStart = () => {
+    card.value?.$el.classList.add('active');
+  };
 
-        if (debug.value) {
-          debug.value.innerHTML = `
-            <div>Type: ${type}</div>
-            <div>Current X: ${currentX}</div>
-            <div>Delta X: ${deltaX}</div>
-            <div>Velocity X: ${velocityX}</div>`;
-        }
-      };
+  const onMove = (detail: GestureDetail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
 
-      const onEnd = () => {
-        card.value?.$el.classList.remove('active');
-      };
+    if (debug.value) {
+      debug.value.innerHTML = `
+      <div>Type: ${type}</div>
+      <div>Current X: ${currentX}</div>
+      <div>Delta X: ${deltaX}</div>
+      <div>Velocity X: ${velocityX}</div>`;
+    }
+  };
 
-      return {
-        card,
-        debug,
-      };
-    },
-  });
+  const onEnd = () => {
+    card.value?.$el.classList.remove('active');
+  };
 </script>
 ```
diff --git a/static/usage/v7/gestures/double-click/vue.md b/static/usage/v7/gestures/double-click/vue.md
index aebfad5a830..99886533328 100644
--- a/static/usage/v7/gestures/double-click/vue.md
+++ b/static/usage/v7/gestures/double-click/vue.md
@@ -5,59 +5,47 @@
   </ion-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCard, IonCardContent, createGesture } from '@ionic/vue';
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonCard,
-      IonCardContent,
-    },
-    setup() {
-      const DOUBLE_CLICK_THRESHOLD = 500;
-      const card = ref();
+  const DOUBLE_CLICK_THRESHOLD = 500;
+  const card = ref();
 
-      let lastOnStart = 0;
-      let currentOffset = 0;
+  let lastOnStart = 0;
+  let currentOffset = 0;
 
-      onMounted(() => {
-        const gesture = createGesture({
-          el: card.value.$el,
-          threshold: 0,
-          onStart,
-          gestureName: 'double-click',
-        });
+  onMounted(() => {
+    const gesture = createGesture({
+      el: card.value.$el,
+      threshold: 0,
+      onStart,
+      gestureName: 'double-click',
+    });
 
-        gesture.enable();
-      });
-
-      const onStart = () => {
-        const now = Date.now();
-
-        if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
-          card.value.$el.style.setProperty('transform', getNewTransform());
-          lastOnStart = 0;
-        } else {
-          lastOnStart = now;
-        }
-      };
-
-      const getNewTransform = () => {
-        if (currentOffset >= 100) {
-          currentOffset = 0;
-        } else {
-          currentOffset += 20;
-        }
-
-        return `translateX(${currentOffset}px)`;
-      };
-
-      return {
-        card,
-      };
-    },
+    gesture.enable();
   });
+
+  const onStart = () => {
+    const now = Date.now();
+
+    if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+      card.value.$el.style.setProperty('transform', getNewTransform());
+      lastOnStart = 0;
+    } else {
+      lastOnStart = now;
+    }
+  };
+
+  const getNewTransform = () => {
+    if (currentOffset >= 100) {
+      currentOffset = 0;
+    } else {
+      currentOffset += 20;
+    }
+
+    return `translateX(${currentOffset}px)`;
+  };
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/basic/vue.md b/static/usage/v7/grid/basic/vue.md
index d693fc8510d..bf68e83e78b 100644
--- a/static/usage/v7/grid/basic/vue.md
+++ b/static/usage/v7/grid/basic/vue.md
@@ -37,13 +37,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/customizing/column-number/vue.md b/static/usage/v7/grid/customizing/column-number/vue.md
index 1af3143593f..ed180c8e9fe 100644
--- a/static/usage/v7/grid/customizing/column-number/vue.md
+++ b/static/usage/v7/grid/customizing/column-number/vue.md
@@ -11,13 +11,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/customizing/padding/vue.md b/static/usage/v7/grid/customizing/padding/vue.md
index 343511e231d..9a4eca25097 100644
--- a/static/usage/v7/grid/customizing/padding/vue.md
+++ b/static/usage/v7/grid/customizing/padding/vue.md
@@ -9,13 +9,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/customizing/width/vue.md b/static/usage/v7/grid/customizing/width/vue.md
index 40b0002e822..7b2fec8af9a 100644
--- a/static/usage/v7/grid/customizing/width/vue.md
+++ b/static/usage/v7/grid/customizing/width/vue.md
@@ -9,13 +9,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/fixed/vue.md b/static/usage/v7/grid/fixed/vue.md
index fbaa7118bbd..429e17de5a1 100644
--- a/static/usage/v7/grid/fixed/vue.md
+++ b/static/usage/v7/grid/fixed/vue.md
@@ -9,13 +9,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/horizontal-alignment/vue.md b/static/usage/v7/grid/horizontal-alignment/vue.md
index 689efada3ea..349270c2113 100644
--- a/static/usage/v7/grid/horizontal-alignment/vue.md
+++ b/static/usage/v7/grid/horizontal-alignment/vue.md
@@ -41,13 +41,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/offset-responsive/vue.md b/static/usage/v7/grid/offset-responsive/vue.md
index ca540bee471..380d673728b 100644
--- a/static/usage/v7/grid/offset-responsive/vue.md
+++ b/static/usage/v7/grid/offset-responsive/vue.md
@@ -30,13 +30,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/offset/vue.md b/static/usage/v7/grid/offset/vue.md
index 1a69ea6e061..611de1c42ec 100644
--- a/static/usage/v7/grid/offset/vue.md
+++ b/static/usage/v7/grid/offset/vue.md
@@ -29,13 +29,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/push-pull-responsive/vue.md b/static/usage/v7/grid/push-pull-responsive/vue.md
index 82015e52758..9898d173897 100644
--- a/static/usage/v7/grid/push-pull-responsive/vue.md
+++ b/static/usage/v7/grid/push-pull-responsive/vue.md
@@ -31,13 +31,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md
index b5146e95e0e..326501b4ce3 100644
--- a/static/usage/v7/grid/push-pull/vue.md
+++ b/static/usage/v7/grid/push-pull/vue.md
@@ -39,13 +39,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/size-auto/vue.md b/static/usage/v7/grid/size-auto/vue.md
index f410272730d..e4895d0acf1 100644
--- a/static/usage/v7/grid/size-auto/vue.md
+++ b/static/usage/v7/grid/size-auto/vue.md
@@ -34,13 +34,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonInput, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/size-responsive/vue.md b/static/usage/v7/grid/size-responsive/vue.md
index 2762e9c4774..8789c634c15 100644
--- a/static/usage/v7/grid/size-responsive/vue.md
+++ b/static/usage/v7/grid/size-responsive/vue.md
@@ -32,13 +32,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/size/vue.md b/static/usage/v7/grid/size/vue.md
index 14baef9e1c4..6568a6b34fe 100644
--- a/static/usage/v7/grid/size/vue.md
+++ b/static/usage/v7/grid/size/vue.md
@@ -30,13 +30,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/grid/vertical-alignment/vue.md b/static/usage/v7/grid/vertical-alignment/vue.md
index e48b234b38a..ec2d0218207 100644
--- a/static/usage/v7/grid/vertical-alignment/vue.md
+++ b/static/usage/v7/grid/vertical-alignment/vue.md
@@ -46,13 +46,8 @@
   </ion-grid>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/header/basic/vue.md b/static/usage/v7/header/basic/vue.md
index 1bba4fdee2b..3f7d5ec3ebf 100644
--- a/static/usage/v7/header/basic/vue.md
+++ b/static/usage/v7/header/basic/vue.md
@@ -10,12 +10,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/header/condense/vue.md b/static/usage/v7/header/condense/vue.md
index dddaef7f71c..bd860dda6cf 100644
--- a/static/usage/v7/header/condense/vue.md
+++ b/static/usage/v7/header/condense/vue.md
@@ -75,12 +75,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md
index 84aac1c56fe..1129415b233 100644
--- a/static/usage/v7/header/custom-scroll-target/vue.md
+++ b/static/usage/v7/header/custom-scroll-target/vue.md
@@ -69,13 +69,8 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md
index 264038c103c..e18de2b186b 100644
--- a/static/usage/v7/header/fade/vue.md
+++ b/static/usage/v7/header/fade/vue.md
@@ -67,12 +67,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/header/no-border/vue.md b/static/usage/v7/header/no-border/vue.md
index a5583fb06d1..b390d195a69 100644
--- a/static/usage/v7/header/no-border/vue.md
+++ b/static/usage/v7/header/no-border/vue.md
@@ -10,12 +10,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md
index 26370009d44..97bffb7dfa3 100644
--- a/static/usage/v7/header/translucent/vue.md
+++ b/static/usage/v7/header/translucent/vue.md
@@ -67,12 +67,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/icon/basic/vue.md b/static/usage/v7/icon/basic/vue.md
index c78d79fb041..e305ee5c2a9 100644
--- a/static/usage/v7/icon/basic/vue.md
+++ b/static/usage/v7/icon/basic/vue.md
@@ -6,16 +6,8 @@
   <ion-icon :icon="logoIonic" size="large" color="primary"></ion-icon>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonIcon } from '@ionic/vue';
   import { logoIonic } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon },
-    setup() {
-      return { logoIonic };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md
index f453a679ec1..af6cecbc4d0 100644
--- a/static/usage/v7/img/basic/vue.md
+++ b/static/usage/v7/img/basic/vue.md
@@ -6,12 +6,7 @@
   ></ion-img>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonImg } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonImg },
-  });
 </script>
 ```
diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
index cea52dd957c..324f8d515f1 100644
--- a/static/usage/v7/infinite-scroll/basic/vue.md
+++ b/static/usage/v7/infinite-scroll/basic/vue.md
@@ -15,7 +15,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonInfiniteScroll,
@@ -26,37 +26,22 @@
     IonLabel,
     InfiniteScrollCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent, reactive } from 'vue';
+  import { reactive } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonList,
-      IonItem,
-      IonAvatar,
-      IonLabel,
-    },
-    setup() {
-      const items = reactive([]);
+  const items = reactive([]);
 
-      const generateItems = () => {
-        const count = items.length + 1;
-        for (let i = 0; i < 50; i++) {
-          items.push(`Item ${count + i}`);
-        }
-      };
+  const generateItems = () => {
+    const count = items.length + 1;
+    for (let i = 0; i < 50; i++) {
+      items.push(`Item ${count + i}`);
+    }
+  };
 
-      const ionInfinite = (event: InfiniteScrollCustomEvent) => {
-        generateItems();
-        setTimeout(() => event.target.complete(), 500);
-      };
+  const ionInfinite = (event: InfiniteScrollCustomEvent) => {
+    generateItems();
+    setTimeout(() => event.target.complete(), 500);
+  };
 
-      generateItems();
-
-      return { ionInfinite, items };
-    },
-  });
+  generateItems();
 </script>
 ```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
index b5fd3bad6e8..0c850de11dd 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -81,38 +81,14 @@
   </ion-content>
 </template>
 
-<script lang="ts">
-  import {
-    IonContent,
-    IonInfiniteScroll,
-    IonInfiniteScrollContent,
-    IonList,
-    IonItem,
-    IonAvatar,
-    IonLabel,
-    InfiniteScrollCustomEvent,
-  } from '@ionic/vue';
-  import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+  import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/vue';
+  import { reactive } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonList,
-      IonItem,
-      IonAvatar,
-      IonLabel,
-    },
-    setup() {
-      const items = reactive([]);
+  const items = reactive([]);
 
-      for (let i = 1; i < 51; i++) {
-        items.push(`Item ${i}`);
-      }
-
-      return { items };
-    },
-  });
+  for (let i = 1; i < 51; i++) {
+    items.push(`Item ${i}`);
+  }
 </script>
 ```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
index 6facce2be59..b2d02c1db4d 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
@@ -18,7 +18,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonInfiniteScroll,
@@ -27,29 +27,13 @@
     IonItem,
     IonAvatar,
     IonLabel,
-    InfiniteScrollCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent, reactive } from 'vue';
+  import { reactive } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonList,
-      IonItem,
-      IonAvatar,
-      IonLabel,
-    },
-    setup() {
-      const items = reactive([]);
+  const items = reactive([]);
 
-      for (let i = 1; i < 51; i++) {
-        items.push(`Item ${i}`);
-      }
-
-      return { items };
-    },
-  });
+  for (let i = 1; i < 51; i++) {
+    items.push(`Item ${i}`);
+  }
 </script>
 ```
diff --git a/static/usage/v7/input/basic/vue.md b/static/usage/v7/input/basic/vue.md
index cfdca09244a..70dc672fef3 100644
--- a/static/usage/v7/input/basic/vue.md
+++ b/static/usage/v7/input/basic/vue.md
@@ -23,12 +23,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/clear/vue.md b/static/usage/v7/input/clear/vue.md
index e5cd540d469..dd00c9abd2f 100644
--- a/static/usage/v7/input/clear/vue.md
+++ b/static/usage/v7/input/clear/vue.md
@@ -34,12 +34,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/counter-alignment/vue.md b/static/usage/v7/input/counter-alignment/vue.md
index 77c9d4b0fde..832cae69ceb 100644
--- a/static/usage/v7/input/counter-alignment/vue.md
+++ b/static/usage/v7/input/counter-alignment/vue.md
@@ -11,7 +11,7 @@
   </ion-list>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
index bba2db1a32e..e01bdb2e716 100644
--- a/static/usage/v7/input/counter/vue.md
+++ b/static/usage/v7/input/counter/vue.md
@@ -12,7 +12,7 @@
   ></ion-input>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
 
   const customFormatter = (inputLength, maxLength) => {
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
index d1f2e440b05..b974339fb82 100644
--- a/static/usage/v7/input/fill/vue.md
+++ b/static/usage/v7/input/fill/vue.md
@@ -7,12 +7,7 @@
   <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md
index 8335d386636..2684a14976e 100644
--- a/static/usage/v7/input/filtering/vue.md
+++ b/static/usage/v7/input/filtering/vue.md
@@ -12,35 +12,28 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-    setup() {
-      const ionInputEl = ref();
-      const inputModel = ref('');
-      const onInput = (event) => {
-        const value = event.target!.value;
+  const ionInputEl = ref();
+  const inputModel = ref('');
+  const onInput = (event) => {
+    const value = event.target!.value;
 
-        // Removes non alphanumeric characters
-        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
 
-        /**
-         * Update both the state variable and
-         * the component to keep them in sync.
-         */
-        inputModel.value = filteredValue;
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    inputModel.value = filteredValue;
 
-        const inputCmp = ionInputEl.value;
-        if (inputCmp !== undefined) {
-          inputCmp.$el.value = filteredValue;
-        }
-      };
-
-      return { ionInputEl, inputModel, onInput };
-    },
-  });
+    const inputCmp = ionInputEl.value;
+    if (inputCmp !== undefined) {
+      inputCmp.$el.value = filteredValue;
+    }
+  };
 </script>
 ```
diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md
index e4f5ef538b6..d46816d6030 100644
--- a/static/usage/v7/input/helper-error/vue.md
+++ b/static/usage/v7/input/helper-error/vue.md
@@ -13,36 +13,31 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-    methods: {
-      validateEmail(email) {
-        return email.match(
-          /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-        );
-      },
-
-      validate(event) {
-        const value = event.target.value;
-
-        this.$refs.input.$el.classList.remove('ion-valid');
-        this.$refs.input.$el.classList.remove('ion-invalid');
-
-        if (value === '') return;
-
-        this.validateEmail(value)
-          ? this.$refs.input.$el.classList.add('ion-valid')
-          : this.$refs.input.$el.classList.add('ion-invalid');
-      },
-
-      markTouched() {
-        this.$refs.input.$el.classList.add('ion-touched');
-      },
-    },
-  });
+  import { ref } from 'vue';
+
+  const input = ref();
+
+  const validateEmail = (email) => {
+    return email.match(
+      /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    );
+  };
+
+  const validate = (event) => {
+    const value = event.target.value;
+
+    input.value.$el.classList.remove('ion-valid');
+    input.value.$el.classList.remove('ion-invalid');
+
+    if (value === '') return;
+
+    validateEmail(value) ? input.value.$el.classList.add('ion-valid') : input.value.$el.classList.add('ion-invalid');
+  };
+
+  const markTouched = () => {
+    input.value.$el.classList.add('ion-touched');
+  };
 </script>
 ```
diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md
index 8854647965d..628492195a3 100644
--- a/static/usage/v7/input/label-placement/vue.md
+++ b/static/usage/v7/input/label-placement/vue.md
@@ -19,12 +19,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/label-slot/vue.md b/static/usage/v7/input/label-slot/vue.md
index 4b3fb3daeb8..97906146a2e 100644
--- a/static/usage/v7/input/label-slot/vue.md
+++ b/static/usage/v7/input/label-slot/vue.md
@@ -9,12 +9,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList, IonText },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/no-visible-label/vue.md b/static/usage/v7/input/no-visible-label/vue.md
index cc181047943..ceaa97a294b 100644
--- a/static/usage/v7/input/no-visible-label/vue.md
+++ b/static/usage/v7/input/no-visible-label/vue.md
@@ -7,12 +7,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/start-end-slots/vue.md b/static/usage/v7/input/start-end-slots/vue.md
index 76380eb566a..77f2a5d472b 100644
--- a/static/usage/v7/input/start-end-slots/vue.md
+++ b/static/usage/v7/input/start-end-slots/vue.md
@@ -12,22 +12,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
   import { eye, lockClosed } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonInput,
-      IonItem,
-      IonList,
-    },
-    setup() {
-      return { eye, lockClosed };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/theming/colors/vue.md b/static/usage/v7/input/theming/colors/vue.md
index e9d3a4e0ef4..60968a1cd27 100644
--- a/static/usage/v7/input/theming/colors/vue.md
+++ b/static/usage/v7/input/theming/colors/vue.md
@@ -11,12 +11,7 @@
   <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
index 77ab74eeeab..71f9ab13376 100644
--- a/static/usage/v7/input/theming/css-properties/vue.md
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -10,13 +10,8 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md
index 752f60c183f..c0e129ce4ce 100644
--- a/static/usage/v7/input/types/vue.md
+++ b/static/usage/v7/input/types/vue.md
@@ -23,12 +23,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md
index 22c9565c278..6d182a324fe 100644
--- a/static/usage/v7/item-divider/basic/vue.md
+++ b/static/usage/v7/item-divider/basic/vue.md
@@ -35,12 +35,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-divider/theming/colors/vue.md b/static/usage/v7/item-divider/theming/colors/vue.md
index 981f99a09da..60f964551f5 100644
--- a/static/usage/v7/item-divider/theming/colors/vue.md
+++ b/static/usage/v7/item-divider/theming/colors/vue.md
@@ -32,12 +32,7 @@
   </ion-item-divider>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItemDivider, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md
index 950e3775d83..2a6776fcb76 100644
--- a/static/usage/v7/item-divider/theming/css-properties/vue.md
+++ b/static/usage/v7/item-divider/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
   </ion-item-divider>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItemDivider } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/item-group/basic/vue.md b/static/usage/v7/item-group/basic/vue.md
index edba72f0e69..4b643fad6fb 100644
--- a/static/usage/v7/item-group/basic/vue.md
+++ b/static/usage/v7/item-group/basic/vue.md
@@ -33,12 +33,7 @@
   </ion-item-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemDivider, IonItemGroup, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md
index 43109034598..16ae176267c 100644
--- a/static/usage/v7/item-group/sliding-items/vue.md
+++ b/static/usage/v7/item-group/sliding-items/vue.md
@@ -67,7 +67,7 @@
   </ion-item-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonItem,
     IonItemDivider,
@@ -77,10 +77,5 @@
     IonItemSliding,
     IonLabel,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-sliding/basic/vue.md b/static/usage/v7/item-sliding/basic/vue.md
index f6f8631a2bd..4df17bf5d97 100644
--- a/static/usage/v7/item-sliding/basic/vue.md
+++ b/static/usage/v7/item-sliding/basic/vue.md
@@ -39,12 +39,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-sliding/expandable/vue.md b/static/usage/v7/item-sliding/expandable/vue.md
index fc9ee8c25ca..91bd715d899 100644
--- a/static/usage/v7/item-sliding/expandable/vue.md
+++ b/static/usage/v7/item-sliding/expandable/vue.md
@@ -18,12 +18,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item-sliding/icons/vue.md b/static/usage/v7/item-sliding/icons/vue.md
index 7f10c0eaa51..92e2aa7fcd3 100644
--- a/static/usage/v7/item-sliding/icons/vue.md
+++ b/static/usage/v7/item-sliding/icons/vue.md
@@ -120,16 +120,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue';
   import { archive, heart, trash } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList },
-    setup() {
-      return { archive, heart, trash };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
index c8e25a1819a..494e7c62f0c 100644
--- a/static/usage/v7/item/basic/vue.md
+++ b/static/usage/v7/item/basic/vue.md
@@ -40,12 +40,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md
index 8680f189472..44438d0bcd9 100644
--- a/static/usage/v7/item/buttons/vue.md
+++ b/static/usage/v7/item/buttons/vue.md
@@ -36,16 +36,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
   import { home, navigate, star } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonIcon, IonItem, IonLabel },
-    setup() {
-      return { home, navigate, star };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/clickable/vue.md b/static/usage/v7/item/clickable/vue.md
index 1af8f362758..bb2f1a06ee9 100644
--- a/static/usage/v7/item/clickable/vue.md
+++ b/static/usage/v7/item/clickable/vue.md
@@ -17,12 +17,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/content-types/actions/vue.md b/static/usage/v7/item/content-types/actions/vue.md
index bef520f8f19..f8992c1d4bf 100644
--- a/static/usage/v7/item/content-types/actions/vue.md
+++ b/static/usage/v7/item/content-types/actions/vue.md
@@ -150,7 +150,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonAvatar,
     IonContent,
@@ -165,27 +165,6 @@
     IonTitle,
     IonToolbar,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { pin, share, trash } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: {
-      IonAvatar,
-      IonContent,
-      IonHeader,
-      IonIcon,
-      IonItem,
-      IonItemOptions,
-      IonItemOption,
-      IonItemSliding,
-      IonLabel,
-      IonList,
-      IonTitle,
-      IonToolbar,
-    },
-    setup() {
-      return { pin, share, trash };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/content-types/controls/vue.md b/static/usage/v7/item/content-types/controls/vue.md
index 4c5e5b8bf76..7b5e44f890a 100644
--- a/static/usage/v7/item/content-types/controls/vue.md
+++ b/static/usage/v7/item/content-types/controls/vue.md
@@ -39,21 +39,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonCheckbox,
-      IonContent,
-      IonHeader,
-      IonInput,
-      IonItem,
-      IonList,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/content-types/metadata/vue.md b/static/usage/v7/item/content-types/metadata/vue.md
index 5183d079aef..5f6090d0f97 100644
--- a/static/usage/v7/item/content-types/metadata/vue.md
+++ b/static/usage/v7/item/content-types/metadata/vue.md
@@ -90,7 +90,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -103,26 +103,7 @@
     IonTitle,
     IonToolbar,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { chevronForward, listCircle } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonIcon,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonNote,
-      IonText,
-      IonTitle,
-      IonToolbar,
-    },
-    setup() {
-      return { chevronForward, listCircle };
-    },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/item/content-types/supporting-visuals/vue.md b/static/usage/v7/item/content-types/supporting-visuals/vue.md
index 73f3eb56721..02cdb617e36 100644
--- a/static/usage/v7/item/content-types/supporting-visuals/vue.md
+++ b/static/usage/v7/item/content-types/supporting-visuals/vue.md
@@ -47,22 +47,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: {
-      IonAvatar,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonIcon,
-    },
-    setup() {
-      return { airplane, bluetooth, call, wifi };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/content-types/text/vue.md b/static/usage/v7/item/content-types/text/vue.md
index f6b36a8f6d8..37d26cd8767 100644
--- a/static/usage/v7/item/content-types/text/vue.md
+++ b/static/usage/v7/item/content-types/text/vue.md
@@ -33,7 +33,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -47,23 +47,6 @@
     IonToolbar,
     IonTitle,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonInput,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonNote,
-      IonTextarea,
-      IonToggle,
-      IonToolbar,
-      IonTitle,
-    },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md
index 54010095652..052683b709c 100644
--- a/static/usage/v7/item/detail-arrows/vue.md
+++ b/static/usage/v7/item/detail-arrows/vue.md
@@ -37,18 +37,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
   import { caretForwardOutline } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-    setup() {
-      return {
-        caretForwardOutline,
-      };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 62ce6f5efc1..c1d85fda588 100644
--- a/static/usage/v7/item/inputs/vue.md
+++ b/static/usage/v7/item/inputs/vue.md
@@ -43,7 +43,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonCheckbox,
     IonInput,
@@ -54,10 +54,5 @@
     IonSelectOption,
     IonToggle,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md
index fb855de221f..891ed66bf3c 100644
--- a/static/usage/v7/item/lines/vue.md
+++ b/static/usage/v7/item/lines/vue.md
@@ -41,16 +41,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonIcon, IonItem, IonLabel } from '@ionic/vue';
   import { informationCircle, star } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon, IonItem, IonLabel },
-    setup() {
-      return { informationCircle, star };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/media/vue.md b/static/usage/v7/item/media/vue.md
index 38b16a91fb3..dc3078f9741 100644
--- a/static/usage/v7/item/media/vue.md
+++ b/static/usage/v7/item/media/vue.md
@@ -15,12 +15,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar, IonItem, IonLabel, IonThumbnail },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/theming/colors/vue.md b/static/usage/v7/item/theming/colors/vue.md
index b98f625e479..5500e0c9083 100644
--- a/static/usage/v7/item/theming/colors/vue.md
+++ b/static/usage/v7/item/theming/colors/vue.md
@@ -32,12 +32,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/theming/css-properties/vue.md b/static/usage/v7/item/theming/css-properties/vue.md
index 305102b811b..d1adc06485d 100644
--- a/static/usage/v7/item/theming/css-properties/vue.md
+++ b/static/usage/v7/item/theming/css-properties/vue.md
@@ -13,13 +13,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/item/theming/css-shadow-parts/vue.md b/static/usage/v7/item/theming/css-shadow-parts/vue.md
index b0ebb030693..2bcda2b8979 100644
--- a/static/usage/v7/item/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/item/theming/css-shadow-parts/vue.md
@@ -13,13 +13,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md
index 76bb289ee00..7d4b9a93de1 100644
--- a/static/usage/v7/item/theming/input-highlight/vue.md
+++ b/static/usage/v7/item/theming/input-highlight/vue.md
@@ -16,12 +16,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    components: { IonInput, IonItem, IonLabel },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/keyboard/enterkeyhint/vue.md b/static/usage/v7/keyboard/enterkeyhint/vue.md
index a52b2b90d92..6e46fc8e46b 100644
--- a/static/usage/v7/keyboard/enterkeyhint/vue.md
+++ b/static/usage/v7/keyboard/enterkeyhint/vue.md
@@ -14,16 +14,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonList, IonItem, IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonList,
-      IonItem,
-      IonInput,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/keyboard/inputmode/vue.md b/static/usage/v7/keyboard/inputmode/vue.md
index 3a65c04b073..6ad97abbd75 100644
--- a/static/usage/v7/keyboard/inputmode/vue.md
+++ b/static/usage/v7/keyboard/inputmode/vue.md
@@ -19,16 +19,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonList, IonItem, IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonList,
-      IonItem,
-      IonInput,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/label/basic/vue.md b/static/usage/v7/label/basic/vue.md
index 87f46b68110..2b1aaca0a93 100644
--- a/static/usage/v7/label/basic/vue.md
+++ b/static/usage/v7/label/basic/vue.md
@@ -3,12 +3,7 @@
   <ion-label>Label</ion-label>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md
index 6f9443e1a5e..dfb7541d20f 100644
--- a/static/usage/v7/label/input/vue.md
+++ b/static/usage/v7/label/input/vue.md
@@ -31,11 +31,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md
index 28d135fa965..f1b5815449a 100644
--- a/static/usage/v7/label/item/vue.md
+++ b/static/usage/v7/label/item/vue.md
@@ -26,12 +26,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/label/theming/colors/vue.md b/static/usage/v7/label/theming/colors/vue.md
index da18a00d4d1..d58a0591693 100644
--- a/static/usage/v7/label/theming/colors/vue.md
+++ b/static/usage/v7/label/theming/colors/vue.md
@@ -12,12 +12,7 @@
   <ion-label color="dark">Dark</ion-label>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v7/layout/dynamic-font-scaling/vue.md b/static/usage/v7/layout/dynamic-font-scaling/vue.md
index 5e0f13156c6..4564caa820f 100644
--- a/static/usage/v7/layout/dynamic-font-scaling/vue.md
+++ b/static/usage/v7/layout/dynamic-font-scaling/vue.md
@@ -45,7 +45,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonBackButton,
     IonButton,
@@ -64,35 +64,5 @@
     IonToolbar,
   } from '@ionic/vue';
   import { create } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonBackButton,
-      IonButton,
-      IonButtons,
-      IonCheckbox,
-      IonContent,
-      IonFooter,
-      IonHeader,
-      IonIcon,
-      IonInput,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonTitle,
-      IonToggle,
-      IonToolbar,
-    },
-    setup() {
-      return { create };
-    },
-  });
 </script>
-
-<style>
-  html {
-    --ion-dynamic-font: var(--ion-default-dynamic-font);
-  }
-</style>
 ```
diff --git a/static/usage/v7/list-header/basic/vue.md b/static/usage/v7/list-header/basic/vue.md
index b7d6980e400..d891af18198 100644
--- a/static/usage/v7/list-header/basic/vue.md
+++ b/static/usage/v7/list-header/basic/vue.md
@@ -22,12 +22,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonListHeader },
-  });
 </script>
 ```
diff --git a/static/usage/v7/list-header/buttons/vue.md b/static/usage/v7/list-header/buttons/vue.md
index 704e94f057a..94ca0cda062 100644
--- a/static/usage/v7/list-header/buttons/vue.md
+++ b/static/usage/v7/list-header/buttons/vue.md
@@ -23,12 +23,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonItem, IonLabel, IonList, IonListHeader },
-  });
 </script>
 ```
diff --git a/static/usage/v7/list-header/lines/vue.md b/static/usage/v7/list-header/lines/vue.md
index 6ec522dd8a4..06f43b5cbf1 100644
--- a/static/usage/v7/list-header/lines/vue.md
+++ b/static/usage/v7/list-header/lines/vue.md
@@ -37,12 +37,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonListHeader },
-  });
 </script>
 ```
diff --git a/static/usage/v7/list-header/theming/colors/vue.md b/static/usage/v7/list-header/theming/colors/vue.md
index b20672dd78f..ddf26984441 100644
--- a/static/usage/v7/list-header/theming/colors/vue.md
+++ b/static/usage/v7/list-header/theming/colors/vue.md
@@ -32,12 +32,7 @@
   </ion-list-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonListHeader } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonListHeader },
-  });
 </script>
 ```
diff --git a/static/usage/v7/list-header/theming/css-properties/vue.md b/static/usage/v7/list-header/theming/css-properties/vue.md
index c56d482c2a2..572b4155e28 100644
--- a/static/usage/v7/list-header/theming/css-properties/vue.md
+++ b/static/usage/v7/list-header/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
   </ion-list-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonListHeader } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonListHeader },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/list/basic/vue.md b/static/usage/v7/list/basic/vue.md
index 4f3886c0719..8bc0e26f836 100644
--- a/static/usage/v7/list/basic/vue.md
+++ b/static/usage/v7/list/basic/vue.md
@@ -19,12 +19,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/list/inset/vue.md b/static/usage/v7/list/inset/vue.md
index 5391206549f..d3af6eb591a 100644
--- a/static/usage/v7/list/inset/vue.md
+++ b/static/usage/v7/list/inset/vue.md
@@ -21,12 +21,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonItem, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/list/lines/vue.md b/static/usage/v7/list/lines/vue.md
index 914ba88d980..f1accc7a794 100644
--- a/static/usage/v7/list/lines/vue.md
+++ b/static/usage/v7/list/lines/vue.md
@@ -37,12 +37,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md
index e80b61cc8b3..0f55dbf9d4a 100644
--- a/static/usage/v7/loading/controller/vue.md
+++ b/static/usage/v7/loading/controller/vue.md
@@ -3,24 +3,16 @@
   <ion-button @click="showLoading">Show Loading</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, loadingController } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton },
-    setup() {
-      const showLoading = async () => {
-        const loading = await loadingController.create({
-          message: 'Dismissing after 3 seconds...',
-          duration: 3000,
-        });
+  const showLoading = async () => {
+    const loading = await loadingController.create({
+      message: 'Dismissing after 3 seconds...',
+      duration: 3000,
+    });
 
-        loading.present();
-      };
-
-      return { showLoading };
-    },
-  });
+    loading.present();
+  };
 </script>
 ```
diff --git a/static/usage/v7/loading/inline/vue.md b/static/usage/v7/loading/inline/vue.md
index 9c924108af8..1a8b98e6ae5 100644
--- a/static/usage/v7/loading/inline/vue.md
+++ b/static/usage/v7/loading/inline/vue.md
@@ -4,11 +4,7 @@
   <ion-loading trigger="open-loading" :duration="3000" message="Dismissing after 3 seconds..."> </ion-loading>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonLoading } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: { IonButton, IonLoading },
-  });
 </script>
 ```
diff --git a/static/usage/v7/loading/spinners/vue.md b/static/usage/v7/loading/spinners/vue.md
index 5e3b62759ad..beaa1cd866b 100644
--- a/static/usage/v7/loading/spinners/vue.md
+++ b/static/usage/v7/loading/spinners/vue.md
@@ -4,12 +4,7 @@
   <ion-loading trigger="open-loading" message="Loading..." duration="3000" spinner="circles"></ion-loading>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonLoading } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonLoading },
-  });
 </script>
 ```
diff --git a/static/usage/v7/loading/theming/vue.md b/static/usage/v7/loading/theming/vue.md
index 7f4538b7068..d7ced5afac5 100644
--- a/static/usage/v7/loading/theming/vue.md
+++ b/static/usage/v7/loading/theming/vue.md
@@ -4,13 +4,8 @@
   <ion-loading class="custom-loading" trigger="open-loading" message="Loading..." duration="3000"></ion-loading>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonLoading } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonLoading },
-  });
 </script>
 <style>
   ion-loading.custom-loading {
diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md
index 531c50678f8..81657010c8f 100644
--- a/static/usage/v7/menu/basic/vue.md
+++ b/static/usage/v7/menu/basic/vue.md
@@ -21,21 +21,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonMenu,
-      IonMenuButton,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md
index 1fb4e986f44..6f66b5f29ac 100644
--- a/static/usage/v7/menu/multiple/vue.md
+++ b/static/usage/v7/menu/multiple/vue.md
@@ -43,42 +43,34 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController },
-    setup() {
-      const openFirstMenu = async () => {
-        /**
-         * Open the menu by menu-id
-         * We refer to the menu using an ID
-         * because multiple "start" menus exist.
-         */
-        await menuController.open('first-menu');
-      };
+  const openFirstMenu = async () => {
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
+    await menuController.open('first-menu');
+  };
 
-      const openSecondMenu = async () => {
-        /**
-         * Open the menu by menu-id
-         * We refer to the menu using an ID
-         * because multiple "start" menus exist.
-         */
-        await menuController.open('second-menu');
-      };
+  const openSecondMenu = async () => {
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
+    await menuController.open('second-menu');
+  };
 
-      const openEndMenu = async () => {
-        /**
-         * Open the menu by side
-         * We can refer to the menu by side
-         * here because only one "end" menu exists
-         */
-        await menuController.open('end');
-      };
-
-      return { openFirstMenu, openSecondMenu, openEndMenu };
-    },
-  });
+  const openEndMenu = async () => {
+    /**
+     * Open the menu by side
+     * We can refer to the menu by side
+     * here because only one "end" menu exists
+     */
+    await menuController.open('end');
+  };
 </script>
 ```
diff --git a/static/usage/v7/menu/sides/vue.md b/static/usage/v7/menu/sides/vue.md
index 66448f05bf6..7633eef1786 100644
--- a/static/usage/v7/menu/sides/vue.md
+++ b/static/usage/v7/menu/sides/vue.md
@@ -21,21 +21,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonMenu,
-      IonMenuButton,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md
index 27a96f00e0b..c3f9e0abd79 100644
--- a/static/usage/v7/menu/theming/vue.md
+++ b/static/usage/v7/menu/theming/vue.md
@@ -21,22 +21,8 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonMenu,
-      IonMenuButton,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md
index 6b723df95ad..377b67c4e17 100644
--- a/static/usage/v7/menu/toggle/vue.md
+++ b/static/usage/v7/menu/toggle/vue.md
@@ -26,21 +26,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonContent,
-      IonHeader,
-      IonMenu,
-      IonMenuToggle,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md
index f10b90a0a9a..59a98b0f9ba 100644
--- a/static/usage/v7/menu/type/vue.md
+++ b/static/usage/v7/menu/type/vue.md
@@ -46,7 +46,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonButton,
     IonContent,
@@ -60,27 +60,8 @@
     IonTitle,
     IonToolbar,
   } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonContent,
-      IonHeader,
-      IonItem,
-      IonMenu,
-      IonMenuToggle,
-      IonPage,
-      IonRadio,
-      IonRadioGroup,
-      IonTitle,
-      IonToolbar,
-    },
-    setup() {
-      const menuType = ref('overlay');
-
-      return { menuType };
-    },
-  });
+  const menuType = ref('overlay');
 </script>
 ```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
index 1944ce5eb21..b33d7799a10 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -31,7 +31,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     CheckboxCustomEvent,
     IonButtons,
@@ -45,38 +45,23 @@
     IonCheckbox,
     IonPage,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref, onMounted } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonCheckbox,
-      IonPage,
-    },
-    data() {
-      return {
-        canDismiss: false,
-        presentingElement: undefined,
-      };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-      onTermsChanged(event: CheckboxCustomEvent) {
-        this.canDismiss = event.detail.checked;
-      },
-    },
-    mounted() {
-      this.presentingElement = this.$refs.page.$el;
-    },
+  const canDismiss = ref(false);
+  const presentingElement = ref();
+  const page = ref();
+  const modal = ref();
+
+  const dismiss = () => {
+    modal.value.$el.dismiss();
+  };
+
+  const onTermsChanged = (event: CheckboxCustomEvent) => {
+    canDismiss.value = event.detail.checked;
+  };
+
+  onMounted(() => {
+    presentingElement.value = page.value.$el;
   });
 </script>
 ```
diff --git a/static/usage/v7/modal/can-dismiss/function/vue.md b/static/usage/v7/modal/can-dismiss/function/vue.md
index cdf51c892ac..72eb927e498 100644
--- a/static/usage/v7/modal/can-dismiss/function/vue.md
+++ b/static/usage/v7/modal/can-dismiss/function/vue.md
@@ -26,7 +26,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonButtons,
     IonButton,
@@ -38,41 +38,37 @@
     IonPage,
     actionSheetController,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref, onMounted } from 'vue';
 
-  export default defineComponent({
-    components: { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage },
-    data() {
-      return {
-        presentingElement: undefined,
-      };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-      async canDismiss() {
-        const actionSheet = await actionSheetController.create({
-          header: 'Are you sure?',
-          buttons: [
-            {
-              text: 'Yes',
-              role: 'confirm',
-            },
-            {
-              text: 'No',
-              role: 'cancel',
-            },
-          ],
-        });
-        actionSheet.present();
-        const { role } = await actionSheet.onWillDismiss();
-        return role === 'confirm';
-      },
-    },
-    mounted() {
-      this.presentingElement = this.$refs.page.$el;
-    },
+  const presentingElement = ref(undefined);
+  const page = ref();
+  const modal = ref();
+
+  const dismiss = () => {
+    modal.value.$el.dismiss();
+  };
+
+  const canDismiss = async () => {
+    const actionSheet = await actionSheetController.create({
+      header: 'Are you sure?',
+      buttons: [
+        {
+          text: 'Yes',
+          role: 'confirm',
+        },
+        {
+          text: 'No',
+          role: 'cancel',
+        },
+      ],
+    });
+    actionSheet.present();
+    const { role } = await actionSheet.onWillDismiss();
+    return role === 'confirm';
+  };
+
+  onMounted(() => {
+    presentingElement.value = page.value.$el;
   });
 </script>
 ```
diff --git a/static/usage/v7/modal/card/basic/vue.md b/static/usage/v7/modal/card/basic/vue.md
index efd959cdd90..54f34ff447f 100644
--- a/static/usage/v7/modal/card/basic/vue.md
+++ b/static/usage/v7/modal/card/basic/vue.md
@@ -63,7 +63,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonButtons,
     IonButton,
@@ -79,37 +79,18 @@
     IonLabel,
     IonPage,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref, onMounted } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonButtons,
-      IonButton,
-      IonModal,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel,
-      IonPage,
-    },
-    data() {
-      return {
-        presentingElement: null,
-      };
-    },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-    },
-    mounted() {
-      this.presentingElement = this.$refs.page.$el;
-    },
+  const presentingElement = ref(null);
+  const page = ref();
+  const modal = ref();
+
+  const dismiss = () => {
+    modal.value.$el.dismiss();
+  };
+
+  onMounted(() => {
+    presentingElement.value = page.value.$el;
   });
 </script>
 ```
diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
index f5a2c1309cb..d3ecfde1623 100644
--- a/static/usage/v7/modal/controller/vue/example_vue.md
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -13,7 +13,7 @@
   </ion-page>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
   import Modal from './Modal.vue';
   import { ref } from 'vue';
diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
index 534ba17654f..c5e09e6cb1a 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" setup>
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -30,7 +30,8 @@
     IonInput,
     modalController,
   } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
+
   const name = ref();
 
   const cancel = () => modalController.dismiss(null, 'cancel');
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
index a16e82e5a17..590b4ac7661 100644
--- a/static/usage/v7/modal/custom-dialogs/vue.md
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -31,7 +31,7 @@
   </ion-content>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import {
     IonButton,
     IonModal,
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 50bad5487a4..1d4b8891deb 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -35,7 +35,7 @@
   </ion-content>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import {
     IonButtons,
     IonButton,
diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
index 19e4cb0557f..c7109a5b3f8 100644
--- a/static/usage/v7/modal/inline/is-open/vue.md
+++ b/static/usage/v7/modal/inline/is-open/vue.md
@@ -28,7 +28,7 @@
   </ion-content>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonButtons, IonButton, IonModal, IonHeader, IonToolbar, IonContent, IonTitle } from '@ionic/vue';
   import { ref } from 'vue';
 
diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
index 02dba8daf37..1bec009881e 100644
--- a/static/usage/v7/modal/performance/mount/vue.md
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -21,9 +21,9 @@
   </ion-content>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
   const modal = ref();
 
diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md
index c8501ba89e6..a34d713c512 100644
--- a/static/usage/v7/modal/sheet/auto-height/vue.md
+++ b/static/usage/v7/modal/sheet/auto-height/vue.md
@@ -28,7 +28,7 @@
   </ion-content>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
index d8dea197856..4efa6bfc329 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" setup>
+<script setup lang="ts">
   import {
     IonButton,
     IonModal,
diff --git a/static/usage/v7/modal/sheet/basic/vue.md b/static/usage/v7/modal/sheet/basic/vue.md
index ad5847eb53a..9895475eebf 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" setup>
+<script setup lang="ts">
   import {
     IonButton,
     IonModal,
diff --git a/static/usage/v7/modal/sheet/handle-behavior/vue.md b/static/usage/v7/modal/sheet/handle-behavior/vue.md
index 6163493a9d3..d129fe176cd 100644
--- a/static/usage/v7/modal/sheet/handle-behavior/vue.md
+++ b/static/usage/v7/modal/sheet/handle-behavior/vue.md
@@ -23,7 +23,7 @@
   </ion-content>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/modal/styling/animations/vue.md b/static/usage/v7/modal/styling/animations/vue.md
index 9cc28a39ed8..ec6f2d5af00 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" setup>
+<script setup lang="ts">
   import {
     createAnimation,
     IonButtons,
diff --git a/static/usage/v7/modal/styling/theming/vue.md b/static/usage/v7/modal/styling/theming/vue.md
index fb5d2d6868f..870371d9562 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" setup>
+<script setup lang="ts">
   import {
     IonButtons,
     IonButton,
diff --git a/static/usage/v7/nav/modal-navigation/vue/example_vue.md b/static/usage/v7/nav/modal-navigation/vue/example_vue.md
index ad5242e5c06..d0be7ab7647 100644
--- a/static/usage/v7/nav/modal-navigation/vue/example_vue.md
+++ b/static/usage/v7/nav/modal-navigation/vue/example_vue.md
@@ -25,8 +25,8 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-  import { nextTick } from 'vue';
+<script setup lang="ts">
+  import { nextTick, ref } from 'vue';
   import {
     IonNav,
     IonPage,
@@ -40,21 +40,20 @@
   } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
-  export default {
-    components: { IonNav, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonButtons },
-    methods: {
-      dismiss() {
-        this.$refs.modal.$el.dismiss();
-      },
-      async onWillPresent() {
-        // Need to wait two ticks before the ref is set
-        await nextTick();
-        await nextTick();
+  const modal = ref();
+  const nav = ref();
 
-        const nav = this.$refs.nav.$el;
-        nav.setRoot(PageOne, { nav });
-      },
-    },
+  const dismiss = () => {
+    modal.value.$el.dismiss();
+  };
+
+  const onWillPresent = async () => {
+    // Need to wait two ticks before the ref is set
+    await nextTick();
+    await nextTick();
+
+    const navEl = nav.value.$el;
+    navEl.setRoot(PageOne, { nav: navEl });
   };
 </script>
 ```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
index 94613725139..b2ed82f816e 100644
--- a/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
+++ b/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
@@ -6,19 +6,19 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
-  export default {
-    components: { IonContent, IonButton },
-    props: ['nav'],
-    methods: {
-      navigateToPageTwo() {
-        const { nav } = this;
-        nav.push(PageTwo, { nav });
-      },
-    },
+  interface Props {
+    nav: any;
+  }
+
+  const props = defineProps<Props>();
+
+  const navigateToPageTwo = () => {
+    const { nav } = props;
+    nav.push(PageTwo, { nav });
   };
 </script>
 ```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
index 9dde8817996..db50e12c87e 100644
--- a/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
+++ b/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
@@ -7,22 +7,23 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonContent, IonButton },
-    props: ['nav'],
-    methods: {
-      navigateBack() {
-        const { nav } = this;
-        nav.pop();
-      },
-      navigateToRoot() {
-        const { nav } = this;
-        nav.popToRoot();
-      },
-    },
+  interface Props {
+    nav: any;
+  }
+
+  const props = defineProps<Props>();
+
+  const navigateBack = () => {
+    const { nav } = props;
+    nav.pop();
+  };
+
+  const navigateToRoot = () => {
+    const { nav } = props;
+    nav.popToRoot();
   };
 </script>
 ```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
index 737fa71158b..b70b3bbe440 100644
--- a/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
+++ b/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
@@ -6,19 +6,19 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonButton } from '@ionic/vue';
   import PageThree from './PageThree.vue';
 
-  export default {
-    components: { IonContent, IonButton },
-    props: ['nav'],
-    methods: {
-      navigateToPageThree() {
-        const { nav } = this;
-        nav.push(PageThree, { nav });
-      },
-    },
+  interface Props {
+    nav: any;
+  }
+
+  const props = defineProps<Props>();
+
+  const navigateToPageThree = () => {
+    const { nav } = props;
+    nav.push(PageThree, { nav });
   };
 </script>
 ```
diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
index 0d1bb74fb60..0cff5d69a9b 100644
--- a/static/usage/v7/nav/nav-link/vue/example_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -3,18 +3,11 @@
   <ion-nav :root="component"></ion-nav>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
-  export default {
-    components: { IonNav },
-    data() {
-      return {
-        component: markRaw(PageOne),
-      };
-    },
-  };
+  const component = markRaw(PageOne);
 </script>
 ```
diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
index 6597688ea05..0226b65a597 100644
--- a/static/usage/v7/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -13,18 +13,11 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
-  export default {
-    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
-    data() {
-      return {
-        component: markRaw(PageTwo),
-      };
-    },
-  };
+  const component = markRaw(PageTwo);
 </script>
 ```
diff --git a/static/usage/v7/nav/nav-link/vue/page_three_vue.md b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
index 54d6acf24c9..215be80da5e 100644
--- a/static/usage/v7/nav/nav-link/vue/page_three_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
@@ -13,11 +13,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
-
-  export default {
-    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
-  };
 </script>
 ```
diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
index ceb17385968..49170458c16 100644
--- a/static/usage/v7/nav/nav-link/vue/page_two_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
@@ -16,7 +16,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { markRaw } from 'vue';
   import {
     IonHeader,
@@ -30,22 +30,6 @@
   } from '@ionic/vue';
   import PageThree from './PageThree.vue';
 
-  export default {
-    components: {
-      IonHeader,
-      IonTitle,
-      IonToolbar,
-      IonContent,
-      IonNavLink,
-      IonButton,
-      IonButtons,
-      IonBackButton,
-    },
-    data() {
-      return {
-        component: markRaw(PageThree),
-      };
-    },
-  };
+  const component = markRaw(PageThree);
 </script>
 ```
diff --git a/static/usage/v7/note/basic/vue.md b/static/usage/v7/note/basic/vue.md
index dffb1348fc9..3790ce220a0 100644
--- a/static/usage/v7/note/basic/vue.md
+++ b/static/usage/v7/note/basic/vue.md
@@ -3,12 +3,7 @@
   <ion-note>Default Note</ion-note>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonNote } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonNote },
-  });
 </script>
 ```
diff --git a/static/usage/v7/note/item/vue.md b/static/usage/v7/note/item/vue.md
index 24b7add1ed1..698cb771b29 100644
--- a/static/usage/v7/note/item/vue.md
+++ b/static/usage/v7/note/item/vue.md
@@ -11,12 +11,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonNote } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonNote },
-  });
 </script>
 ```
diff --git a/static/usage/v7/note/theming/colors/vue.md b/static/usage/v7/note/theming/colors/vue.md
index 77e767a5e5f..f330f2b4298 100644
--- a/static/usage/v7/note/theming/colors/vue.md
+++ b/static/usage/v7/note/theming/colors/vue.md
@@ -12,12 +12,7 @@
   <ion-note color="dark">Dark Note</ion-note>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonNote } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonNote },
-  });
 </script>
 ```
diff --git a/static/usage/v7/note/theming/css-properties/vue.md b/static/usage/v7/note/theming/css-properties/vue.md
index 77e8b361f2c..5feb93da730 100644
--- a/static/usage/v7/note/theming/css-properties/vue.md
+++ b/static/usage/v7/note/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
   <ion-note>Default Note</ion-note>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonNote } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonNote },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/picker/controller/vue.md b/static/usage/v7/picker/controller/vue.md
index 54fedf2cce3..2fc258e022b 100644
--- a/static/usage/v7/picker/controller/vue.md
+++ b/static/usage/v7/picker/controller/vue.md
@@ -3,59 +3,51 @@
   <ion-button @click="openPicker()">Open</ion-button>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonButton, pickerController } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton },
-    data() {
-      return {
-        message: '',
-      };
-    },
-    methods: {
-      async openPicker() {
-        const picker = await pickerController.create({
-          columns: [
+  const message = ref('');
+
+  const openPicker = async () => {
+    const picker = await pickerController.create({
+      columns: [
+        {
+          name: 'languages',
+          options: [
             {
-              name: 'languages',
-              options: [
-                {
-                  text: 'JavaScript',
-                  value: 'javascript',
-                },
-                {
-                  text: 'TypeScript',
-                  value: 'typescript',
-                },
-                {
-                  text: 'Rust',
-                  value: 'rust',
-                },
-                {
-                  text: 'C#',
-                  value: 'c#',
-                },
-              ],
+              text: 'JavaScript',
+              value: 'javascript',
+            },
+            {
+              text: 'TypeScript',
+              value: 'typescript',
             },
-          ],
-          buttons: [
             {
-              text: 'Cancel',
-              role: 'cancel',
+              text: 'Rust',
+              value: 'rust',
             },
             {
-              text: 'Confirm',
-              handler: (value) => {
-                console.log(`You selected: ${value.languages.value}`);
-              },
+              text: 'C#',
+              value: 'c#',
             },
           ],
-        });
-        await picker.present();
-      },
-    },
-  });
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Confirm',
+          handler: (value) => {
+            console.log(`You selected: ${value.languages.value}`);
+          },
+        },
+      ],
+    });
+    await picker.present();
+  };
 </script>
 ```
diff --git a/static/usage/v7/picker/inline/isOpen/vue.md b/static/usage/v7/picker/inline/isOpen/vue.md
index bd03157e734..c79237670b7 100644
--- a/static/usage/v7/picker/inline/isOpen/vue.md
+++ b/static/usage/v7/picker/inline/isOpen/vue.md
@@ -9,58 +9,51 @@
   ></ion-picker>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonPicker } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonPicker },
-    setup() {
-      const isOpen = ref(false);
+  const isOpen = ref(false);
 
-      const pickerColumns = [
+  const pickerColumns = [
+    {
+      name: 'languages',
+      options: [
         {
-          name: 'languages',
-          options: [
-            {
-              text: 'JavaScript',
-              value: 'javascript',
-            },
-            {
-              text: 'TypeScript',
-              value: 'typescript',
-            },
-            {
-              text: 'Rust',
-              value: 'rust',
-            },
-            {
-              text: 'C#',
-              value: 'c#',
-            },
-          ],
+          text: 'JavaScript',
+          value: 'javascript',
         },
-      ];
-
-      const pickerButtons = [
         {
-          text: 'Cancel',
-          role: 'cancel',
+          text: 'TypeScript',
+          value: 'typescript',
         },
         {
-          text: 'Confirm',
-          handler: (value) => {
-            console.log(`You selected: ${value.languages.value}`);
-          },
+          text: 'Rust',
+          value: 'rust',
         },
-      ];
-
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
+        {
+          text: 'C#',
+          value: 'c#',
+        },
+      ],
+    },
+  ];
 
-      return { pickerColumns, pickerButtons, isOpen, setOpen };
+  const pickerButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        console.log(`You selected: ${value.languages.value}`);
+      },
     },
-  });
+  ];
+
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
+  };
 </script>
 ```
diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md
index 05a4d215b9e..047da646a97 100644
--- a/static/usage/v7/picker/inline/trigger/vue.md
+++ b/static/usage/v7/picker/inline/trigger/vue.md
@@ -4,52 +4,44 @@
   <ion-picker trigger="open-picker" :columns="pickerColumns" :buttons="pickerButtons"></ion-picker>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonButton, IonPicker } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonPicker },
-    setup() {
-      const pickerColumns = [
+  const pickerColumns = [
+    {
+      name: 'languages',
+      options: [
         {
-          name: 'languages',
-          options: [
-            {
-              text: 'JavaScript',
-              value: 'javascript',
-            },
-            {
-              text: 'TypeScript',
-              value: 'typescript',
-            },
-            {
-              text: 'Rust',
-              value: 'rust',
-            },
-            {
-              text: 'C#',
-              value: 'c#',
-            },
-          ],
+          text: 'JavaScript',
+          value: 'javascript',
+        },
+        {
+          text: 'TypeScript',
+          value: 'typescript',
         },
-      ];
-
-      const pickerButtons = [
         {
-          text: 'Cancel',
-          role: 'cancel',
+          text: 'Rust',
+          value: 'rust',
         },
         {
-          text: 'Confirm',
-          handler: (value) => {
-            console.log(`You selected: ${value.languages.value}`);
-          },
+          text: 'C#',
+          value: 'c#',
         },
-      ];
+      ],
+    },
+  ];
 
-      return { pickerColumns, pickerButtons };
+  const pickerButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        console.log(`You selected: ${value.languages.value}`);
+      },
     },
-  });
+  ];
 </script>
 ```
diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md
index d396dcf9c9b..0bc5d797f91 100644
--- a/static/usage/v7/picker/multiple-column/vue.md
+++ b/static/usage/v7/picker/multiple-column/vue.md
@@ -4,82 +4,74 @@
   <ion-picker trigger="open-picker" :columns="pickerColumns" :buttons="pickerButtons"></ion-picker>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonButton, IonPicker } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonPicker },
-    setup() {
-      const pickerColumns = [
+  const pickerColumns = [
+    {
+      name: 'meat',
+      options: [
         {
-          name: 'meat',
-          options: [
-            {
-              text: 'Pepperoni',
-              value: 'pepperoni',
-            },
-            {
-              text: 'Smoked Ham',
-              value: 'smoked-ham',
-            },
-            {
-              text: 'Crispy Bacon',
-              value: 'bacon',
-            },
-          ],
+          text: 'Pepperoni',
+          value: 'pepperoni',
         },
         {
-          name: 'veggies',
-          options: [
-            {
-              text: 'Red onion',
-              value: 'red-onion',
-            },
-            {
-              text: 'Peppers',
-              value: 'peppers',
-            },
-            {
-              text: 'Black olives',
-              value: 'black-olives',
-            },
-          ],
+          text: 'Smoked Ham',
+          value: 'smoked-ham',
         },
         {
-          name: 'crust',
-          options: [
-            {
-              text: 'Pan style',
-              value: 'pan',
-            },
-            {
-              text: 'Hand tossed',
-              value: 'hand-tossed',
-            },
-            {
-              text: 'Stuffed crust',
-              value: 'stuffed-crust',
-            },
-          ],
+          text: 'Crispy Bacon',
+          value: 'bacon',
+        },
+      ],
+    },
+    {
+      name: 'veggies',
+      options: [
+        {
+          text: 'Red onion',
+          value: 'red-onion',
         },
-      ];
-
-      const pickerButtons = [
         {
-          text: 'Cancel',
-          role: 'cancel',
+          text: 'Peppers',
+          value: 'peppers',
         },
         {
-          text: 'Confirm',
-          handler: (value) => {
-            console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
-          },
+          text: 'Black olives',
+          value: 'black-olives',
+        },
+      ],
+    },
+    {
+      name: 'crust',
+      options: [
+        {
+          text: 'Pan style',
+          value: 'pan',
         },
-      ];
+        {
+          text: 'Hand tossed',
+          value: 'hand-tossed',
+        },
+        {
+          text: 'Stuffed crust',
+          value: 'stuffed-crust',
+        },
+      ],
+    },
+  ];
 
-      return { pickerColumns, pickerButtons };
+  const pickerButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+    },
+    {
+      text: 'Confirm',
+      handler: (value) => {
+        console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+      },
     },
-  });
+  ];
 </script>
 ```
diff --git a/static/usage/v7/popover/customization/positioning/vue.md b/static/usage/v7/popover/customization/positioning/vue.md
index b658de342a4..9627c5bd14f 100644
--- a/static/usage/v7/popover/customization/positioning/vue.md
+++ b/static/usage/v7/popover/customization/positioning/vue.md
@@ -23,13 +23,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/popover/customization/sizing/vue.md b/static/usage/v7/popover/customization/sizing/vue.md
index 72d20c9fa77..14ca82fb3e9 100644
--- a/static/usage/v7/popover/customization/sizing/vue.md
+++ b/static/usage/v7/popover/customization/sizing/vue.md
@@ -11,12 +11,7 @@
   </ion-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonPopover },
-  });
 </script>
 ```
diff --git a/static/usage/v7/popover/customization/styling/vue.md b/static/usage/v7/popover/customization/styling/vue.md
index 964eeb09bfc..7cbc7bb145d 100644
--- a/static/usage/v7/popover/customization/styling/vue.md
+++ b/static/usage/v7/popover/customization/styling/vue.md
@@ -6,13 +6,8 @@
   </ion-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonPopover },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/popover/nested/vue.md b/static/usage/v7/popover/nested/vue.md
index 04a7b6d7e36..bdc5199a0e4 100644
--- a/static/usage/v7/popover/nested/vue.md
+++ b/static/usage/v7/popover/nested/vue.md
@@ -20,12 +20,7 @@
   </ion-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonItem, IonList, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonItem, IonList, IonPopover },
-  });
 </script>
 ```
diff --git a/static/usage/v7/popover/performance/mount/vue.md b/static/usage/v7/popover/performance/mount/vue.md
index bc54f345bfe..e62f5504e56 100644
--- a/static/usage/v7/popover/performance/mount/vue.md
+++ b/static/usage/v7/popover/performance/mount/vue.md
@@ -8,12 +8,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
-  });
 </script>
 ```
diff --git a/static/usage/v7/popover/presenting/controller/vue/example_vue.md b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
index 538479cee2f..0bf2dacf698 100644
--- a/static/usage/v7/popover/presenting/controller/vue/example_vue.md
+++ b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
@@ -3,24 +3,19 @@
   <ion-button @click="openPopover">Click Me</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, popoverController } from '@ionic/vue';
   import Popover from './Popover.vue';
 
-  export default {
-    components: { IonButton },
-    methods: {
-      async openPopover(event: Event) {
-        const popover = await popoverController.create({
-          component: Popover,
-          event: event,
-        });
-        await popover.present();
+  const openPopover = async (event: Event) => {
+    const popover = await popoverController.create({
+      component: Popover,
+      event: event,
+    });
+    await popover.present();
 
-        const { role } = await popover.onDidDismiss();
-        console.log(`Popover dismissed with role: ${role}`);
-      },
-    },
+    const { role } = await popover.onDidDismiss();
+    console.log(`Popover dismissed with role: ${role}`);
   };
 </script>
 ```
diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
index 85f8bd06cad..e945ee01ce3 100644
--- a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
+++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
@@ -3,13 +3,7 @@
   <ion-content class="ion-padding">Hello World!</ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'Popover',
-    components: { IonContent },
-  });
 </script>
 ```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/vue.md b/static/usage/v7/popover/presenting/inline-isopen/vue.md
index fbbaf065a17..0cdf2619e7a 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/vue.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/vue.md
@@ -6,24 +6,16 @@
   </ion-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
-    data() {
-      return {
-        popoverOpen: false,
-        event: null,
-      };
-    },
-    methods: {
-      openPopover(e: Event) {
-        this.event = e;
-        this.popoverOpen = true;
-      },
-    },
-  });
+  const popoverOpen = ref(false);
+  const event = ref(null);
+
+  const openPopover = (e: Event) => {
+    event.value = e;
+    popoverOpen.value = true;
+  };
 </script>
 ```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/vue.md b/static/usage/v7/popover/presenting/inline-trigger/vue.md
index 07f1f68a62f..0241fdd6904 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/vue.md
+++ b/static/usage/v7/popover/presenting/inline-trigger/vue.md
@@ -16,12 +16,7 @@
   </ion-popover>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
-  });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md
index c70c23eb470..d2493f0d09e 100644
--- a/static/usage/v7/progress-bar/buffer/vue.md
+++ b/static/usage/v7/progress-bar/buffer/vue.md
@@ -3,36 +3,27 @@
   <ion-progress-bar :buffer="buffer" :value="progress"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref, onMounted } from 'vue';
 
-  export default defineComponent({
-    components: { IonProgressBar },
-    setup() {
-      let buffer = ref(0.06);
-      let progress = ref(0);
+  const buffer = ref(0.06);
+  const progress = ref(0);
 
-      return {
-        buffer,
-        progress,
-      };
-    },
-    mounted() {
-      setInterval(() => {
-        this.buffer += 0.06;
-        this.progress += 0.06;
+  onMounted(() => {
+    setInterval(() => {
+      buffer.value += 0.06;
+      progress.value += 0.06;
 
-        // Reset the progress bar when it reaches 100%
-        // to continuously show the demo
-        if (this.progress > 1) {
-          setTimeout(() => {
-            this.buffer = 0.06;
-            this.progress = 0;
-          }, 1000);
-        }
-      }, 1000);
-    },
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (progress.value > 1) {
+        setTimeout(() => {
+          buffer.value = 0.06;
+          progress.value = 0;
+        }, 1000);
+      }
+    }, 1000);
   });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md
index 5eb4cd2b847..089f2911c87 100644
--- a/static/usage/v7/progress-bar/determinate/vue.md
+++ b/static/usage/v7/progress-bar/determinate/vue.md
@@ -3,32 +3,24 @@
   <ion-progress-bar :value="progress"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref, onMounted } from 'vue';
 
-  export default defineComponent({
-    components: { IonProgressBar },
-    setup() {
-      let progress = ref(0);
+  const progress = ref(0);
 
-      return {
-        progress,
-      };
-    },
-    mounted() {
-      setInterval(() => {
-        this.progress += 0.01;
+  onMounted(() => {
+    setInterval(() => {
+      progress.value += 0.01;
 
-        // Reset the progress bar when it reaches 100%
-        // to continuously show the demo
-        if (this.progress > 1) {
-          setTimeout(() => {
-            this.progress = 0;
-          }, 1000);
-        }
-      }, 50);
-    },
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (progress.value > 1) {
+        setTimeout(() => {
+          progress.value = 0;
+        }, 1000);
+      }
+    }, 50);
   });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/indeterminate/vue.md b/static/usage/v7/progress-bar/indeterminate/vue.md
index b15c060bdcc..5ffb112d99b 100644
--- a/static/usage/v7/progress-bar/indeterminate/vue.md
+++ b/static/usage/v7/progress-bar/indeterminate/vue.md
@@ -3,12 +3,7 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/theming/colors/vue.md b/static/usage/v7/progress-bar/theming/colors/vue.md
index 6f42832e199..36e7e70827e 100644
--- a/static/usage/v7/progress-bar/theming/colors/vue.md
+++ b/static/usage/v7/progress-bar/theming/colors/vue.md
@@ -11,12 +11,7 @@
   <ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md
index f63aec9e644..cfe7fccebbc 100644
--- a/static/usage/v7/progress-bar/theming/css-properties/vue.md
+++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md
@@ -4,13 +4,8 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
index 5750323198e..c408ee136df 100644
--- a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
@@ -4,13 +4,8 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/radio/alignment/vue.md b/static/usage/v7/radio/alignment/vue.md
index 0f208b37a2a..1a8d117d68e 100644
--- a/static/usage/v7/radio/alignment/vue.md
+++ b/static/usage/v7/radio/alignment/vue.md
@@ -15,12 +15,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonRadio, IonRadioGroup },
-  });
 </script>
 ```
diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md
index 2d552901212..b18ffdf9c6f 100644
--- a/static/usage/v7/radio/basic/vue.md
+++ b/static/usage/v7/radio/basic/vue.md
@@ -8,12 +8,7 @@
   </ion-radio-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRadio, IonRadioGroup },
-  });
 </script>
 ```
diff --git a/static/usage/v7/radio/empty-selection/vue.md b/static/usage/v7/radio/empty-selection/vue.md
index b80bac834b6..87294166e1d 100644
--- a/static/usage/v7/radio/empty-selection/vue.md
+++ b/static/usage/v7/radio/empty-selection/vue.md
@@ -8,12 +8,7 @@
   </ion-radio-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRadio, IonRadioGroup },
-  });
 </script>
 ```
diff --git a/static/usage/v7/radio/justify/vue.md b/static/usage/v7/radio/justify/vue.md
index 89f9f63b72a..e8dbeb82acd 100644
--- a/static/usage/v7/radio/justify/vue.md
+++ b/static/usage/v7/radio/justify/vue.md
@@ -21,12 +21,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonRadio, IonRadioGroup },
-  });
 </script>
 ```
diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md
index d397b8ce31b..9fd1f5cda97 100644
--- a/static/usage/v7/radio/label-placement/vue.md
+++ b/static/usage/v7/radio/label-placement/vue.md
@@ -23,12 +23,7 @@
   </ion-radio-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRadio, IonRadioGroup },
-  });
 </script>
 ```
diff --git a/static/usage/v7/radio/label-wrap/vue.md b/static/usage/v7/radio/label-wrap/vue.md
index ecabbadb8b1..70510f8787a 100644
--- a/static/usage/v7/radio/label-wrap/vue.md
+++ b/static/usage/v7/radio/label-wrap/vue.md
@@ -17,13 +17,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonList, IonItem, IonRadio, IonRadioGroup },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/radio/theming/colors/vue.md b/static/usage/v7/radio/theming/colors/vue.md
index 74b8aa3a73e..0e30c02f2e5 100644
--- a/static/usage/v7/radio/theming/colors/vue.md
+++ b/static/usage/v7/radio/theming/colors/vue.md
@@ -29,12 +29,7 @@
   </ion-radio-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRadio, IonRadioGroup },
-  });
 </script>
 ```
diff --git a/static/usage/v7/radio/theming/css-properties/vue.md b/static/usage/v7/radio/theming/css-properties/vue.md
index ddbbd48152a..fa35772db41 100644
--- a/static/usage/v7/radio/theming/css-properties/vue.md
+++ b/static/usage/v7/radio/theming/css-properties/vue.md
@@ -6,13 +6,8 @@
   </ion-radio-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRadio, IonRadioGroup },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/vue.md b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
index 24326a92a94..d6b83eef631 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
@@ -6,13 +6,8 @@
   </ion-radio-group>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRadio, IonRadioGroup },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/radio/using-comparewith/vue.md b/static/usage/v7/radio/using-comparewith/vue.md
index d12db87e609..d698017d98d 100644
--- a/static/usage/v7/radio/using-comparewith/vue.md
+++ b/static/usage/v7/radio/using-comparewith/vue.md
@@ -9,46 +9,33 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonItem,
-      IonList,
-      IonRadio,
-      IonRadioGroup,
+  const foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
     },
-    data() {
-      return {
-        foods: [
-          {
-            id: 1,
-            name: 'Apples',
-            type: 'fruit',
-          },
-          {
-            id: 2,
-            name: 'Carrots',
-            type: 'vegetable',
-          },
-          {
-            id: 3,
-            name: 'Cupcakes',
-            type: 'dessert',
-          },
-        ],
-      };
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
     },
-    methods: {
-      compareWith(o1, o2) {
-        return o1.id === o2.id;
-      },
-      handleChange(event) {
-        console.log('Current value:', JSON.stringify(event.detail.value));
-      },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
     },
-  });
+  ];
+
+  const compareWith = (o1, o2) => {
+    return o1.id === o2.id;
+  };
+
+  const handleChange = (event) => {
+    console.log('Current value:', JSON.stringify(event.detail.value));
+  };
 </script>
 ```
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
index 421bea060e4..9738be08d9f 100644
--- a/static/usage/v7/range/basic/vue.md
+++ b/static/usage/v7/range/basic/vue.md
@@ -3,12 +3,7 @@
   <ion-range aria-label="Volume"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/dual-knobs/vue.md b/static/usage/v7/range/dual-knobs/vue.md
index 5e23079bfa7..92193c19c83 100644
--- a/static/usage/v7/range/dual-knobs/vue.md
+++ b/static/usage/v7/range/dual-knobs/vue.md
@@ -3,12 +3,7 @@
   <ion-range aria-label="Dual Knobs Range" :dual-knobs="true" :value="{ lower: 20, upper: 80 }"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/ion-change-event/vue.md b/static/usage/v7/range/ion-change-event/vue.md
index 44a3fdcfa1f..d9f83a4c2b4 100644
--- a/static/usage/v7/range/ion-change-event/vue.md
+++ b/static/usage/v7/range/ion-change-event/vue.md
@@ -3,17 +3,11 @@
   <ion-range aria-label="Range with ionChange" @ionChange="onIonChange"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonRange },
-    methods: {
-      onIonChange({ detail }) {
-        console.log('ionChange emitted value: ' + detail.value);
-      },
-    },
-  });
+  const onIonChange = ({ detail }) => {
+    console.log('ionChange emitted value: ' + detail.value);
+  };
 </script>
 ```
diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md
index 84531f16f2c..6c74d47b808 100644
--- a/static/usage/v7/range/ion-knob-move-event/vue.md
+++ b/static/usage/v7/range/ion-knob-move-event/vue.md
@@ -7,20 +7,15 @@
   ></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonRange },
-    methods: {
-      onIonKnobMoveStart({ detail }) {
-        console.log('ionKnobMoveStart:', detail.value);
-      },
-      onIonKnobMoveEnd({ detail }) {
-        console.log('ionKnobMoveEnd:', detail.value);
-      },
-    },
-  });
+  const onIonKnobMoveStart = ({ detail }) => {
+    console.log('ionKnobMoveStart:', detail.value);
+  };
+
+  const onIonKnobMoveEnd = ({ detail }) => {
+    console.log('ionKnobMoveEnd:', detail.value);
+  };
 </script>
 ```
diff --git a/static/usage/v7/range/label-slot/vue.md b/static/usage/v7/range/label-slot/vue.md
index b67e731d684..5d6d579ac74 100644
--- a/static/usage/v7/range/label-slot/vue.md
+++ b/static/usage/v7/range/label-slot/vue.md
@@ -5,12 +5,7 @@
   </ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange, IonText },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
index 1d80cceb292..6083e60b2d6 100644
--- a/static/usage/v7/range/labels/vue.md
+++ b/static/usage/v7/range/labels/vue.md
@@ -15,12 +15,7 @@
   <ion-range label-placement="stacked" label="Stacked Label"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/no-visible-label/vue.md b/static/usage/v7/range/no-visible-label/vue.md
index 421bea060e4..9738be08d9f 100644
--- a/static/usage/v7/range/no-visible-label/vue.md
+++ b/static/usage/v7/range/no-visible-label/vue.md
@@ -3,12 +3,7 @@
   <ion-range aria-label="Volume"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/pins/vue.md b/static/usage/v7/range/pins/vue.md
index 1fabf896c76..19d1146121a 100644
--- a/static/usage/v7/range/pins/vue.md
+++ b/static/usage/v7/range/pins/vue.md
@@ -3,17 +3,7 @@
   <ion-range aria-label="Range with pin" :pin="true" :pin-formatter="pinFormatter"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-    setup() {
-      return {
-        pinFormatter: (value: number) => `${value}%`,
-      };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/slots/vue.md b/static/usage/v7/range/slots/vue.md
index 57d8edeb2ca..d54935dc574 100644
--- a/static/usage/v7/range/slots/vue.md
+++ b/static/usage/v7/range/slots/vue.md
@@ -6,19 +6,8 @@
   </ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange, IonIcon } from '@ionic/vue';
   import { snowOutline, sunnyOutline } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange, IonIcon },
-    setup() {
-      return {
-        snowOutline,
-        sunnyOutline,
-      };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/snapping-ticks/vue.md b/static/usage/v7/range/snapping-ticks/vue.md
index 69417e31d81..f90e014f14d 100644
--- a/static/usage/v7/range/snapping-ticks/vue.md
+++ b/static/usage/v7/range/snapping-ticks/vue.md
@@ -3,12 +3,7 @@
   <ion-range aria-label="Range with ticks" :ticks="true" :snaps="true" :min="0" :max="10"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/theming/css-properties/vue.md b/static/usage/v7/range/theming/css-properties/vue.md
index c6f7b058b7a..496cdfca8cd 100644
--- a/static/usage/v7/range/theming/css-properties/vue.md
+++ b/static/usage/v7/range/theming/css-properties/vue.md
@@ -16,12 +16,7 @@
   <ion-range aria-label="Custom range" :value="50" :pin="true"></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/vue.md b/static/usage/v7/range/theming/css-shadow-parts/vue.md
index 91b55c3c3c5..6aa7c85c795 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/range/theming/css-shadow-parts/vue.md
@@ -55,12 +55,7 @@
   ></ion-range>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```
diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
index 8a34a29f86e..9293f8df4e5 100644
--- a/static/usage/v7/refresher/advanced/vue.md
+++ b/static/usage/v7/refresher/advanced/vue.md
@@ -23,7 +23,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -35,64 +35,46 @@
     IonRefresherContent,
     IonTitle,
     IonToolbar,
+    RefresherCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { ellipse } from 'ionicons/icons';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonIcon,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonRefresher,
-      IonRefresherContent,
-      IonTitle,
-      IonToolbar,
-      RefresherCustomEvent,
-    },
-    setup() {
-      const names = [
-        'Burt Bear',
-        'Charlie Cheetah',
-        'Donald Duck',
-        'Eva Eagle',
-        'Ellie Elephant',
-        'Gino Giraffe',
-        'Isabella Iguana',
-        'Karl Kitten',
-        'Lionel Lion',
-        'Molly Mouse',
-        'Paul Puppy',
-        'Rachel Rabbit',
-        'Ted Turtle',
-      ];
-      let items = ref([]);
+  const names = [
+    'Burt Bear',
+    'Charlie Cheetah',
+    'Donald Duck',
+    'Eva Eagle',
+    'Ellie Elephant',
+    'Gino Giraffe',
+    'Isabella Iguana',
+    'Karl Kitten',
+    'Lionel Lion',
+    'Molly Mouse',
+    'Paul Puppy',
+    'Rachel Rabbit',
+    'Ted Turtle',
+  ];
+  const items = ref([]);
 
-      const chooseRandomName = () => {
-        return names[Math.floor(Math.random() * names.length)];
-      };
+  const chooseRandomName = () => {
+    return names[Math.floor(Math.random() * names.length)];
+  };
 
-      const addItems = (count, unread = false) => {
-        for (let i = 0; i < count; i++) {
-          items.value.unshift({ name: chooseRandomName(), unread });
-        }
-      };
+  const addItems = (count, unread = false) => {
+    for (let i = 0; i < count; i++) {
+      items.value.unshift({ name: chooseRandomName(), unread });
+    }
+  };
 
-      addItems(5);
+  addItems(5);
 
-      const handleRefresh = (event: RefresherCustomEvent) => {
-        setTimeout(() => {
-          addItems(3, true);
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { ellipse, handleRefresh, items, names };
-    },
-  });
+  const handleRefresh = (event: RefresherCustomEvent) => {
+    setTimeout(() => {
+      addItems(3, true);
+      event.target.complete();
+    }, 2000);
+  };
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/refresher/basic/vue.md b/static/usage/v7/refresher/basic/vue.md
index fceacabdd6c..f6669585bfb 100644
--- a/static/usage/v7/refresher/basic/vue.md
+++ b/static/usage/v7/refresher/basic/vue.md
@@ -15,7 +15,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -25,20 +25,12 @@
     IonToolbar,
     RefresherCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: RefresherCustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { handleRefresh };
-    },
-  });
+  const handleRefresh = (event: RefresherCustomEvent) => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
 </script>
 ```
diff --git a/static/usage/v7/refresher/custom-content/vue.md b/static/usage/v7/refresher/custom-content/vue.md
index 9607d02cb7d..badf54c02b8 100644
--- a/static/usage/v7/refresher/custom-content/vue.md
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -21,31 +21,23 @@
   </ion-content>
 </template>
 
-<script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { chevronDownCircleOutline } from 'ionicons/icons';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonRefresher,
-      IonRefresherContent,
-      IonTitle,
-      IonToolbar,
-      RefresherCustomEvent,
-    },
-    setup() {
-      const handleRefresh = (event: RefresherCustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { chevronDownCircleOutline, handleRefresh };
-    },
-  });
+  const handleRefresh = (event: RefresherCustomEvent) => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
 </script>
 ```
diff --git a/static/usage/v7/refresher/custom-scroll-target/vue.md b/static/usage/v7/refresher/custom-scroll-target/vue.md
index 9b4c6274d1b..b2567a741a1 100644
--- a/static/usage/v7/refresher/custom-scroll-target/vue.md
+++ b/static/usage/v7/refresher/custom-scroll-target/vue.md
@@ -17,7 +17,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -27,21 +27,13 @@
     IonToolbar,
     RefresherCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: RefresherCustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { handleRefresh };
-    },
-  });
+  const handleRefresh = (event: RefresherCustomEvent) => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/refresher/pull-properties/vue.md b/static/usage/v7/refresher/pull-properties/vue.md
index b9279686005..335a0b0f651 100644
--- a/static/usage/v7/refresher/pull-properties/vue.md
+++ b/static/usage/v7/refresher/pull-properties/vue.md
@@ -15,7 +15,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonContent,
     IonHeader,
@@ -25,20 +25,12 @@
     IonToolbar,
     RefresherCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: RefresherCustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { handleRefresh };
-    },
-  });
+  const handleRefresh = (event: RefresherCustomEvent) => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
 </script>
 ```
diff --git a/static/usage/v7/reorder/basic/vue.md b/static/usage/v7/reorder/basic/vue.md
index 0ac2374089f..7799edbcd16 100644
--- a/static/usage/v7/reorder/basic/vue.md
+++ b/static/usage/v7/reorder/basic/vue.md
@@ -31,26 +31,18 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
-    setup() {
-      const handleReorder = (event: CustomEvent) => {
-        // The `from` and `to` properties contain the index of the item
-        // when the drag started and ended, respectively
-        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
-
-        // Finish the reorder and position the item in the DOM based on
-        // where the gesture ended. This method can also be called directly
-        // by the reorder group
-        event.detail.complete();
-      };
-
-      return { handleReorder };
-    },
-  });
+<script setup lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderCustomEvent } from '@ionic/vue';
+
+  const handleReorder = (event: ItemReorderCustomEvent) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group.
+    event.detail.complete();
+  };
 </script>
 ```
diff --git a/static/usage/v7/reorder/custom-icon/vue.md b/static/usage/v7/reorder/custom-icon/vue.md
index 87d77e33048..e8da4d31e81 100644
--- a/static/usage/v7/reorder/custom-icon/vue.md
+++ b/static/usage/v7/reorder/custom-icon/vue.md
@@ -41,26 +41,19 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
+  import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderCustomEvent } from '@ionic/vue';
   import { pizza } from 'ionicons/icons';
 
-  export default defineComponent({
-    components: { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
-    setup() {
-      const handleReorder = (event: CustomEvent) => {
-        // The `from` and `to` properties contain the index of the item
-        // when the drag started and ended, respectively
-        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+  const handleReorder = (event: ItemReorderCustomEvent) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
-        // Finish the reorder and position the item in the DOM based on
-        // where the gesture ended. This method can also be called directly
-        // by the reorder group
-        event.detail.complete();
-      };
-      return { handleReorder, pizza };
-    },
-  });
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group.
+    event.detail.complete();
+  };
 </script>
 ```
diff --git a/static/usage/v7/reorder/custom-scroll-target/vue.md b/static/usage/v7/reorder/custom-scroll-target/vue.md
index 43151b12039..7c23144dc28 100644
--- a/static/usage/v7/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v7/reorder/custom-scroll-target/vue.md
@@ -35,27 +35,27 @@
   </ion-content>
 </template>
 
-<script lang="ts">
-  import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
+  import {
+    IonContent,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonReorder,
+    IonReorderGroup,
+    ItemReorderCustomEvent,
+  } from '@ionic/vue';
 
-  export default defineComponent({
-    components: { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
-    setup() {
-      const handleReorder = (event: CustomEvent) => {
-        // The `from` and `to` properties contain the index of the item
-        // when the drag started and ended, respectively
-        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+  const handleReorder = (event: ItemReorderCustomEvent) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
-        // Finish the reorder and position the item in the DOM based on
-        // where the gesture ended. This method can also be called directly
-        // by the reorder group
-        event.detail.complete();
-      };
-
-      return { handleReorder };
-    },
-  });
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group.
+    event.detail.complete();
+  };
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/reorder/toggling-disabled/vue.md b/static/usage/v7/reorder/toggling-disabled/vue.md
index c649c0ebe36..6606c1af572 100644
--- a/static/usage/v7/reorder/toggling-disabled/vue.md
+++ b/static/usage/v7/reorder/toggling-disabled/vue.md
@@ -33,32 +33,33 @@
   <ion-button @click="toggleReorder()"> Toggle Reorder </ion-button>
 </template>
 
-<script lang="ts">
-  import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+  import {
+    IonButton,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonReorder,
+    IonReorderGroup,
+    ItemReorderCustomEvent,
+  } from '@ionic/vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
-    setup() {
-      let isDisabled = ref(true);
+  const isDisabled = ref(true);
 
-      const handleReorder = (event: CustomEvent) => {
-        // The `from` and `to` properties contain the index of the item
-        // when the drag started and ended, respectively
-        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+  const handleReorder = (event: ItemReorderCustomEvent) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
-        // Finish the reorder and position the item in the DOM based on
-        // where the gesture ended. This method can also be called directly
-        // by the reorder group
-        event.detail.complete();
-      };
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group.
+    event.detail.complete();
+  };
 
-      const toggleReorder = () => {
-        isDisabled.value = !isDisabled.value;
-      };
-
-      return { isDisabled, handleReorder, toggleReorder };
-    },
-  });
+  const toggleReorder = () => {
+    isDisabled.value = !isDisabled.value;
+  };
 </script>
 ```
diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md
index 024caf38347..e20ffc857e8 100644
--- a/static/usage/v7/reorder/updating-data/vue.md
+++ b/static/usage/v7/reorder/updating-data/vue.md
@@ -11,30 +11,24 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderCustomEvent } from '@ionic/vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
-    setup() {
-      const items = ref([1, 2, 3, 4, 5]);
+  const items = ref([1, 2, 3, 4, 5]);
 
-      const handleReorder = (event: CustomEvent) => {
-        // Before complete is called with the items they will remain in the
-        // order before the drag
-        console.log('Before complete', items.value);
+  const handleReorder = (event: ItemReorderCustomEvent) => {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', items.value);
 
-        // Finish the reorder and position the item in the DOM based on
-        // where the gesture ended. Update the items variable to the
-        // new order of items
-        items.value = event.detail.complete(items.value);
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    items.value = event.detail.complete(items.value);
 
-        // After complete is called the items will be in the new order
-        console.log('After complete', items.value);
-      };
-      return { handleReorder, items };
-    },
-  });
+    // After complete is called the items will be in the new order
+    console.log('After complete', items.value);
+  };
 </script>
 ```
diff --git a/static/usage/v7/reorder/wrapper/vue.md b/static/usage/v7/reorder/wrapper/vue.md
index fd157186093..caf984251a4 100644
--- a/static/usage/v7/reorder/wrapper/vue.md
+++ b/static/usage/v7/reorder/wrapper/vue.md
@@ -36,26 +36,18 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
-    setup() {
-      const handleReorder = (event: CustomEvent) => {
-        // The `from` and `to` properties contain the index of the item
-        // when the drag started and ended, respectively
-        console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
-
-        // Finish the reorder and position the item in the DOM based on
-        // where the gesture ended. This method can also be called directly
-        // by the reorder group
-        event.detail.complete();
-      };
-
-      return { handleReorder };
-    },
-  });
+<script setup lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderCustomEvent } from '@ionic/vue';
+
+  const handleReorder = (event: ItemReorderCustomEvent) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group.
+    event.detail.complete();
+  };
 </script>
 ```
diff --git a/static/usage/v7/ripple-effect/basic/vue.md b/static/usage/v7/ripple-effect/basic/vue.md
index e5270056c0c..d0041370f15 100644
--- a/static/usage/v7/ripple-effect/basic/vue.md
+++ b/static/usage/v7/ripple-effect/basic/vue.md
@@ -17,13 +17,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRippleEffect } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRippleEffect },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/ripple-effect/customizing/vue.md b/static/usage/v7/ripple-effect/customizing/vue.md
index d3ea639b68a..2a59e3b6945 100644
--- a/static/usage/v7/ripple-effect/customizing/vue.md
+++ b/static/usage/v7/ripple-effect/customizing/vue.md
@@ -15,13 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRippleEffect } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRippleEffect },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/ripple-effect/type/vue.md b/static/usage/v7/ripple-effect/type/vue.md
index e233fe60d9e..cbf2ce50376 100644
--- a/static/usage/v7/ripple-effect/type/vue.md
+++ b/static/usage/v7/ripple-effect/type/vue.md
@@ -15,13 +15,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonRippleEffect } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRippleEffect },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/searchbar/basic/vue.md b/static/usage/v7/searchbar/basic/vue.md
index ecf7ef4f252..b8c545e2f4d 100644
--- a/static/usage/v7/searchbar/basic/vue.md
+++ b/static/usage/v7/searchbar/basic/vue.md
@@ -7,7 +7,7 @@
   <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonSearchbar } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/searchbar/cancel-button/vue.md b/static/usage/v7/searchbar/cancel-button/vue.md
index 437d028e611..e1a9df6d108 100644
--- a/static/usage/v7/searchbar/cancel-button/vue.md
+++ b/static/usage/v7/searchbar/cancel-button/vue.md
@@ -11,7 +11,7 @@
   ></ion-searchbar>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { IonSearchbar } from '@ionic/vue';
   import { trash } from 'ionicons/icons';
 </script>
diff --git a/static/usage/v7/searchbar/clear-button/vue.md b/static/usage/v7/searchbar/clear-button/vue.md
index 3b5a9e53c7f..fbe6cd1f7a3 100644
--- a/static/usage/v7/searchbar/clear-button/vue.md
+++ b/static/usage/v7/searchbar/clear-button/vue.md
@@ -6,16 +6,8 @@
   <ion-searchbar show-clear-button="always" :clear-icon="trashBin" value="Custom Clear Icon"></ion-searchbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { trashBin } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-    setup() {
-      return { trashBin };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
index 836f226ceb7..466df02af5b 100644
--- a/static/usage/v7/searchbar/debounce/vue.md
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -9,35 +9,27 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonSearchbar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonList, IonSearchbar },
-    setup() {
-      const data = [
-        'Amsterdam',
-        'Buenos Aires',
-        'Cairo',
-        'Geneva',
-        'Hong Kong',
-        'Istanbul',
-        'London',
-        'Madrid',
-        'New York',
-        'Panama City',
-      ];
-      const results = ref(data);
+  const data = [
+    'Amsterdam',
+    'Buenos Aires',
+    'Cairo',
+    'Geneva',
+    'Hong Kong',
+    'Istanbul',
+    'London',
+    'Madrid',
+    'New York',
+    'Panama City',
+  ];
+  const results = ref(data);
 
-      return { data, results };
-    },
-    methods: {
-      handleInput(event) {
-        const query = event.target.value.toLowerCase();
-        this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
-      },
-    },
-  });
+  const handleInput = (event) => {
+    const query = event.target.value.toLowerCase();
+    results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+  };
 </script>
 ```
diff --git a/static/usage/v7/searchbar/search-icon/vue.md b/static/usage/v7/searchbar/search-icon/vue.md
index 38068deedcc..0219c879bfe 100644
--- a/static/usage/v7/searchbar/search-icon/vue.md
+++ b/static/usage/v7/searchbar/search-icon/vue.md
@@ -4,16 +4,8 @@
   <ion-searchbar :search-icon="searchCircle" placeholder="Custom Search Icon"></ion-searchbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { searchCircle } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-    setup() {
-      return { searchCircle };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/theming/colors/vue.md b/static/usage/v7/searchbar/theming/colors/vue.md
index ef95e690107..d817d9185b2 100644
--- a/static/usage/v7/searchbar/theming/colors/vue.md
+++ b/static/usage/v7/searchbar/theming/colors/vue.md
@@ -12,12 +12,7 @@
   <ion-searchbar color="dark" placeholder="Dark"></ion-searchbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/theming/css-properties/vue.md b/static/usage/v7/searchbar/theming/css-properties/vue.md
index 6e45e744231..2ae095e63fd 100644
--- a/static/usage/v7/searchbar/theming/css-properties/vue.md
+++ b/static/usage/v7/searchbar/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
   <ion-searchbar showCancelButton="focus" class="custom"></ion-searchbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/segment-button/basic/vue.md b/static/usage/v7/segment-button/basic/vue.md
index 79fd032d7ca..42db166daca 100644
--- a/static/usage/v7/segment-button/basic/vue.md
+++ b/static/usage/v7/segment-button/basic/vue.md
@@ -25,12 +25,7 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/segment-button/layout/vue.md b/static/usage/v7/segment-button/layout/vue.md
index 71a039bd211..3243cda2f5c 100644
--- a/static/usage/v7/segment-button/layout/vue.md
+++ b/static/usage/v7/segment-button/layout/vue.md
@@ -73,16 +73,8 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
   import { call, heart, pin } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon, IonLabel, IonSegment, IonSegmentButton },
-    setup() {
-      return { call, heart, pin };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/segment-button/theming/css-properties/vue.md b/static/usage/v7/segment-button/theming/css-properties/vue.md
index 50c99688335..36ca9019acd 100644
--- a/static/usage/v7/segment-button/theming/css-properties/vue.md
+++ b/static/usage/v7/segment-button/theming/css-properties/vue.md
@@ -13,13 +13,8 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
index 911d8b7854e..bb7b6a013a2 100644
--- a/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
@@ -13,13 +13,8 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/segment/basic/vue.md b/static/usage/v7/segment/basic/vue.md
index 7252ce56f2f..b341022a007 100644
--- a/static/usage/v7/segment/basic/vue.md
+++ b/static/usage/v7/segment/basic/vue.md
@@ -19,12 +19,7 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/segment/scrollable/vue.md b/static/usage/v7/segment/scrollable/vue.md
index 160fab75489..92114db927e 100644
--- a/static/usage/v7/segment/scrollable/vue.md
+++ b/static/usage/v7/segment/scrollable/vue.md
@@ -34,27 +34,8 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/vue';
   import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon, IonSegment, IonSegmentButton },
-    setup() {
-      return {
-        home,
-        heart,
-        pin,
-        star,
-        call,
-        globe,
-        basket,
-        barbell,
-        trash,
-        person,
-      };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/segment/theming/colors/vue.md b/static/usage/v7/segment/theming/colors/vue.md
index fcce8cce913..9c4822fdb2c 100644
--- a/static/usage/v7/segment/theming/colors/vue.md
+++ b/static/usage/v7/segment/theming/colors/vue.md
@@ -82,12 +82,7 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/segment/theming/css-properties/vue.md b/static/usage/v7/segment/theming/css-properties/vue.md
index 00bf2e42c8f..161a8b89420 100644
--- a/static/usage/v7/segment/theming/css-properties/vue.md
+++ b/static/usage/v7/segment/theming/css-properties/vue.md
@@ -10,13 +10,8 @@
   </ion-segment>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/select/basic/multiple-selection/vue.md b/static/usage/v7/select/basic/multiple-selection/vue.md
index 3287578bddc..08ea8e968c4 100644
--- a/static/usage/v7/select/basic/multiple-selection/vue.md
+++ b/static/usage/v7/select/basic/multiple-selection/vue.md
@@ -11,12 +11,7 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md
index 418fe0b426f..bfc4e339b43 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md
@@ -17,23 +17,19 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-    methods: {
-      handleChange(event) {
-        console.log('ionChange fired with value: ' + event.detail.value);
-      },
-      handleCancel() {
-        console.log('ionCancel fired');
-      },
-      handleDismiss() {
-        console.log('ionDismiss fired');
-      },
-    },
-  });
+  const handleChange = (event) => {
+    console.log('ionChange fired with value: ' + event.detail.value);
+  };
+
+  const handleCancel = () => {
+    console.log('ionCancel fired');
+  };
+
+  const handleDismiss = () => {
+    console.log('ionDismiss fired');
+  };
 </script>
 ```
diff --git a/static/usage/v7/select/basic/single-selection/vue.md b/static/usage/v7/select/basic/single-selection/vue.md
index 637b8446a7b..551fbffeb48 100644
--- a/static/usage/v7/select/basic/single-selection/vue.md
+++ b/static/usage/v7/select/basic/single-selection/vue.md
@@ -11,12 +11,7 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/customization/button-text/vue.md b/static/usage/v7/select/customization/button-text/vue.md
index f5c69c2d69b..2a7b1109a11 100644
--- a/static/usage/v7/select/customization/button-text/vue.md
+++ b/static/usage/v7/select/customization/button-text/vue.md
@@ -23,12 +23,7 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
index 4d748e1c2d9..6f0793d5496 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/vue.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -17,16 +17,8 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
   import { add, remove } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-    setup() {
-      return { add, remove };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
index f7d38a6ae7b..3234c0351f7 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/vue.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
@@ -30,17 +30,9 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
   import { caretDownSharp } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-    setup() {
-      return { caretDownSharp };
-    },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/select/customization/interface-options/vue.md b/static/usage/v7/select/customization/interface-options/vue.md
index 55dcaac0743..51b1b89772f 100644
--- a/static/usage/v7/select/customization/interface-options/vue.md
+++ b/static/usage/v7/select/customization/interface-options/vue.md
@@ -37,37 +37,25 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList, IonSelect, IonSelectOption },
-    setup() {
-      const customAlertOptions = {
-        header: 'Pizza Toppings',
-        subHeader: 'Select your favorite topping',
-        message: 'Choose only one',
-        translucent: true,
-      };
+  const customAlertOptions = {
+    header: 'Pizza Toppings',
+    subHeader: 'Select your favorite topping',
+    message: 'Choose only one',
+    translucent: true,
+  };
 
-      const customPopoverOptions = {
-        header: 'Hair Color',
-        subHeader: 'Select your hair color',
-        message: 'Only select your dominant hair color',
-      };
+  const customPopoverOptions = {
+    header: 'Hair Color',
+    subHeader: 'Select your hair color',
+    message: 'Only select your dominant hair color',
+  };
 
-      const customActionSheetOptions = {
-        header: 'Colors',
-        subHeader: 'Select your favorite color',
-      };
-
-      return {
-        customAlertOptions,
-        customPopoverOptions,
-        customActionSheetOptions,
-      };
-    },
-  });
+  const customActionSheetOptions = {
+    header: 'Colors',
+    subHeader: 'Select your favorite color',
+  };
 </script>
 ```
diff --git a/static/usage/v7/select/customization/styling-select/vue.md b/static/usage/v7/select/customization/styling-select/vue.md
index 749540e895f..88d8160375b 100644
--- a/static/usage/v7/select/customization/styling-select/vue.md
+++ b/static/usage/v7/select/customization/styling-select/vue.md
@@ -7,13 +7,8 @@
   </ion-select>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSelect, IonSelectOption },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v7/select/fill/vue.md b/static/usage/v7/select/fill/vue.md
index e08d5859308..68fa92c3e25 100644
--- a/static/usage/v7/select/fill/vue.md
+++ b/static/usage/v7/select/fill/vue.md
@@ -15,12 +15,7 @@
   </ion-select>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/interfaces/action-sheet/vue.md b/static/usage/v7/select/interfaces/action-sheet/vue.md
index df563aefa47..102714dd2be 100644
--- a/static/usage/v7/select/interfaces/action-sheet/vue.md
+++ b/static/usage/v7/select/interfaces/action-sheet/vue.md
@@ -11,12 +11,7 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonList, IonItem, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/interfaces/popover/vue.md b/static/usage/v7/select/interfaces/popover/vue.md
index 24b1f4b66d0..e51289b4e26 100644
--- a/static/usage/v7/select/interfaces/popover/vue.md
+++ b/static/usage/v7/select/interfaces/popover/vue.md
@@ -11,12 +11,7 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonList, IonItem, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/justify/vue.md b/static/usage/v7/select/justify/vue.md
index f9814d8b797..f6be5ad8681 100644
--- a/static/usage/v7/select/justify/vue.md
+++ b/static/usage/v7/select/justify/vue.md
@@ -25,12 +25,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/label-placement/vue.md b/static/usage/v7/select/label-placement/vue.md
index 9efccb8e49d..ba1256888c4 100644
--- a/static/usage/v7/select/label-placement/vue.md
+++ b/static/usage/v7/select/label-placement/vue.md
@@ -35,12 +35,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/label-slot/vue.md b/static/usage/v7/select/label-slot/vue.md
index 8c8a8dd8be5..872d609abe7 100644
--- a/static/usage/v7/select/label-slot/vue.md
+++ b/static/usage/v7/select/label-slot/vue.md
@@ -12,12 +12,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/no-visible-label/vue.md b/static/usage/v7/select/no-visible-label/vue.md
index 038d7d32130..dbb3a256f08 100644
--- a/static/usage/v7/select/no-visible-label/vue.md
+++ b/static/usage/v7/select/no-visible-label/vue.md
@@ -11,12 +11,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
index b99b76d7a65..35a2c3b69ee 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -15,49 +15,41 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-    data() {
-      return {
-        foods: [
-          {
-            id: 1,
-            name: 'Apples',
-            type: 'fruit',
-          },
-          {
-            id: 2,
-            name: 'Carrots',
-            type: 'vegetable',
-          },
-          {
-            id: 3,
-            name: 'Cupcakes',
-            type: 'dessert',
-          },
-        ],
-      };
+  const foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
     },
-    methods: {
-      compareWith(o1, o2) {
-        if (!o1 || !o2) {
-          return o1 === o2;
-        }
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
 
-        if (Array.isArray(o2)) {
-          return o2.some((o) => o.id === o1.id);
-        }
+  const compareWith = (o1, o2) => {
+    if (!o1 || !o2) {
+      return o1 === o2;
+    }
 
-        return o1.id === o2.id;
-      },
-      handleChange(event) {
-        console.log('Current value:', JSON.stringify(event.detail.value));
-      },
-    },
-  });
+    if (Array.isArray(o2)) {
+      return o2.some((o) => o.id === o1.id);
+    }
+
+    return o1.id === o2.id;
+  };
+
+  const handleChange = (event) => {
+    console.log('Current value:', JSON.stringify(event.detail.value));
+  };
 </script>
 ```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
index e45a73f1d53..a88d6cb7b5e 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -14,41 +14,33 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonSelect, IonSelectOption },
-    data() {
-      return {
-        foods: [
-          {
-            id: 1,
-            name: 'Apples',
-            type: 'fruit',
-          },
-          {
-            id: 2,
-            name: 'Carrots',
-            type: 'vegetable',
-          },
-          {
-            id: 3,
-            name: 'Cupcakes',
-            type: 'dessert',
-          },
-        ],
-      };
+  const foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
     },
-    methods: {
-      compareWith(o1, o2) {
-        return o1 && o2 ? o1.id === o2.id : o1 === o2;
-      },
-      handleChange(event) {
-        console.log('Current value:', JSON.stringify(event.detail.value));
-      },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
     },
-  });
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  const compareWith = (o1, o2) => {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  };
+
+  const handleChange = (event) => {
+    console.log('Current value:', JSON.stringify(event.detail.value));
+  };
 </script>
 ```
diff --git a/static/usage/v7/select/start-end-slots/vue.md b/static/usage/v7/select/start-end-slots/vue.md
index 37882998e57..8905cec221a 100644
--- a/static/usage/v7/select/start-end-slots/vue.md
+++ b/static/usage/v7/select/start-end-slots/vue.md
@@ -15,23 +15,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
   import { eye, leaf } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonItem,
-      IonList,
-      IonSelect,
-      IonSelectOption,
-    },
-    setup() {
-      return { eye, leaf };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/select/typeahead/vue/example_vue.md b/static/usage/v7/select/typeahead/vue/example_vue.md
index 372b3e7d8ec..bf15d147b79 100644
--- a/static/usage/v7/select/typeahead/vue/example_vue.md
+++ b/static/usage/v7/select/typeahead/vue/example_vue.md
@@ -21,63 +21,56 @@
   </ion-modal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import type { Item } from '../types';
   import AppTypeahead from './AppTypeahead.vue';
 
-  export default defineComponent({
-    components: { AppTypeahead, IonContent, IonItem, IonLabel, IonList, IonModal },
-    setup() {
-      const fruits: Item[] = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Apricot', value: 'apricot' },
-        { text: 'Banana', value: 'banana' },
-        { text: 'Blackberry', value: 'blackberry' },
-        { text: 'Blueberry', value: 'blueberry' },
-        { text: 'Cherry', value: 'cherry' },
-        { text: 'Cranberry', value: 'cranberry' },
-        { text: 'Grape', value: 'grape' },
-        { text: 'Grapefruit', value: 'grapefruit' },
-        { text: 'Guava', value: 'guava' },
-        { text: 'Jackfruit', value: 'jackfruit' },
-        { text: 'Lime', value: 'lime' },
-        { text: 'Mango', value: 'mango' },
-        { text: 'Nectarine', value: 'nectarine' },
-        { text: 'Orange', value: 'orange' },
-        { text: 'Papaya', value: 'papaya' },
-        { text: 'Passionfruit', value: 'passionfruit' },
-        { text: 'Peach', value: 'peach' },
-        { text: 'Pear', value: 'pear' },
-        { text: 'Plantain', value: 'plantain' },
-        { text: 'Plum', value: 'plum' },
-        { text: 'Pineapple', value: 'pineapple' },
-        { text: 'Pomegranate', value: 'pomegranate' },
-        { text: 'Raspberry', value: 'raspberry' },
-        { text: 'Strawberry', value: 'strawberry' },
-      ];
-      const modal = ref();
-      const selectedFruitsText = ref('0 Items');
-      const selectedFruits = ref([]);
+  const fruits: Item[] = [
+    { text: 'Apple', value: 'apple' },
+    { text: 'Apricot', value: 'apricot' },
+    { text: 'Banana', value: 'banana' },
+    { text: 'Blackberry', value: 'blackberry' },
+    { text: 'Blueberry', value: 'blueberry' },
+    { text: 'Cherry', value: 'cherry' },
+    { text: 'Cranberry', value: 'cranberry' },
+    { text: 'Grape', value: 'grape' },
+    { text: 'Grapefruit', value: 'grapefruit' },
+    { text: 'Guava', value: 'guava' },
+    { text: 'Jackfruit', value: 'jackfruit' },
+    { text: 'Lime', value: 'lime' },
+    { text: 'Mango', value: 'mango' },
+    { text: 'Nectarine', value: 'nectarine' },
+    { text: 'Orange', value: 'orange' },
+    { text: 'Papaya', value: 'papaya' },
+    { text: 'Passionfruit', value: 'passionfruit' },
+    { text: 'Peach', value: 'peach' },
+    { text: 'Pear', value: 'pear' },
+    { text: 'Plantain', value: 'plantain' },
+    { text: 'Plum', value: 'plum' },
+    { text: 'Pineapple', value: 'pineapple' },
+    { text: 'Pomegranate', value: 'pomegranate' },
+    { text: 'Raspberry', value: 'raspberry' },
+    { text: 'Strawberry', value: 'strawberry' },
+  ];
+  const modal = ref();
+  const selectedFruitsText = ref('0 Items');
+  const selectedFruits = ref([]);
 
-      const formatData = (data: string[]) => {
-        if (data.length === 1) {
-          const fruit = fruits.find((fruit) => fruit.value === data[0]);
-          return fruit.text;
-        }
+  const formatData = (data: string[]) => {
+    if (data.length === 1) {
+      const fruit = fruits.find((fruit) => fruit.value === data[0]);
+      return fruit.text;
+    }
 
-        return `${data.length} items`;
-      };
+    return `${data.length} items`;
+  };
 
-      const fruitSelectionChanged = (fruits: string[]) => {
-        selectedFruits.value = fruits;
-        selectedFruitsText.value = formatData(selectedFruits.value);
-        modal.value.$el.dismiss();
-      };
-
-      return { modal, fruits, selectedFruitsText, selectedFruits, fruitSelectionChanged };
-    },
-  });
+  const fruitSelectionChanged = (fruits: string[]) => {
+    selectedFruits.value = fruits;
+    selectedFruitsText.value = formatData(selectedFruits.value);
+    modal.value.$el.dismiss();
+  };
 </script>
 ```
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
index 71bf0622b8a..1d145e47fb5 100644
--- a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -26,7 +26,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonButton,
     IonButtons,
@@ -40,96 +40,76 @@
     IonToolbar,
   } from '@ionic/vue';
   import type { CheckboxCustomEvent, SearchbarCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    props: {
-      items: Array,
-      selectedItems: Array,
-      title: {
-        type: String,
-        default: 'Select Items',
-      },
-    },
-    emits: ['selection-cancel', 'selection-change'],
-    components: {
-      IonButton,
-      IonButtons,
-      IonCheckbox,
-      IonContent,
-      IonHeader,
-      IonItem,
-      IonList,
-      IonTitle,
-      IonSearchbar,
-      IonToolbar,
-    },
-    setup(props, { emit }) {
-      const filteredItems = ref([...props.items]);
-      const workingSelectedValues = ref([...props.selectedItems]);
+  interface Props {
+    items: Array<any>;
+    selectedItems: Array<any>;
+    title?: string;
+  }
 
-      const isChecked = (value: string) => {
-        return workingSelectedValues.value.find((item) => item === value) !== undefined;
-      };
+  const props = withDefaults(defineProps<Props>(), {
+    title: 'Select Items',
+  });
+
+  const emit = defineEmits<{
+    'selection-cancel': [];
+    'selection-change': [value: any[]];
+  }>();
+
+  const filteredItems = ref([...props.items]);
+  const workingSelectedValues = ref([...props.selectedItems]);
 
-      const cancelChanges = () => {
-        emit('selection-cancel');
-      };
+  const isChecked = (value: string) => {
+    return workingSelectedValues.value.find((item) => item === value) !== undefined;
+  };
 
-      const confirmChanges = () => {
-        emit('selection-change', workingSelectedValues.value);
-      };
+  const cancelChanges = () => {
+    emit('selection-cancel');
+  };
 
-      const searchbarInput = (event: SearchbarCustomEvent) => {
-        filterList(event.target.value);
-      };
+  const confirmChanges = () => {
+    emit('selection-change', workingSelectedValues.value);
+  };
 
+  const searchbarInput = (event: SearchbarCustomEvent) => {
+    filterList(event.target.value);
+  };
+
+  /**
+   * Update the rendered view with
+   * the provided search query. If no
+   * query is provided, all data
+   * will be rendered.
+   */
+  const filterList = (searchQuery: string | undefined) => {
+    /**
+     * If no search query is defined,
+     * return all options.
+     */
+    if (searchQuery === undefined) {
+      filteredItems.value = [...props.items];
+    } else {
       /**
-       * Update the rendered view with
-       * the provided search query. If no
-       * query is provided, all data
-       * will be rendered.
+       * Otherwise, normalize the search
+       * query and check to see which items
+       * contain the search query as a substring.
        */
-      const filterList = (searchQuery: string | undefined) => {
-        /**
-         * If no search query is defined,
-         * return all options.
-         */
-        if (searchQuery === undefined) {
-          filteredItems.value = [...props.items];
-        } else {
-          /**
-           * Otherwise, normalize the search
-           * query and check to see which items
-           * contain the search query as a substring.
-           */
-          const normalizedQuery = searchQuery.toLowerCase();
-          filteredItems.value = props.items.filter((item) => {
-            return item.text.toLowerCase().includes(normalizedQuery);
-          });
-        }
-      };
-
-      const checkboxChange = (event: CheckboxCustomEvent) => {
-        const { checked, value } = event.detail;
+      const normalizedQuery = searchQuery.toLowerCase();
+      filteredItems.value = props.items.filter((item) => {
+        return item.text.toLowerCase().includes(normalizedQuery);
+      });
+    }
+  };
 
-        if (checked) {
-          workingSelectedValues.value = [...workingSelectedValues.value, value];
-        } else {
-          workingSelectedValues.value = workingSelectedValues.value.filter((item) => item !== value);
-        }
-      };
+  const checkboxChange = (event: CheckboxCustomEvent) => {
+    const { checked, value } = event.detail;
 
-      return {
-        filteredItems,
-        workingSelectedValues,
-        isChecked,
-        cancelChanges,
-        confirmChanges,
-        searchbarInput,
-        checkboxChange,
-      };
-    },
-  });
+    if (checked) {
+      workingSelectedValues.value = [...workingSelectedValues.value, value];
+    } else {
+      workingSelectedValues.value = workingSelectedValues.value.filter((item) => item !== value);
+    }
+  };
 </script>
 ```
diff --git a/static/usage/v7/skeleton-text/basic/vue.md b/static/usage/v7/skeleton-text/basic/vue.md
index f391050a009..17b4eb4985f 100644
--- a/static/usage/v7/skeleton-text/basic/vue.md
+++ b/static/usage/v7/skeleton-text/basic/vue.md
@@ -39,7 +39,7 @@
   <ion-button @click="setLoaded(!loaded)">Toggle</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonButton,
     IonIcon,
@@ -51,28 +51,9 @@
     IonThumbnail,
   } from '@ionic/vue';
   import { musicalNotes } from 'ionicons/icons';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonListHeader,
-      IonSkeletonText,
-      IonThumbnail,
-    },
-    setup() {
-      const loaded = ref(false);
-      const setLoaded = (state: boolean) => (loaded.value = state);
-      return {
-        loaded,
-        musicalNotes,
-        setLoaded,
-      };
-    },
-  });
+  const loaded = ref(false);
+  const setLoaded = (state: boolean) => (loaded.value = state);
 </script>
 ```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
index 2785a0e8b51..58395e04bf9 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/vue.md
+++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
@@ -23,20 +23,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonItem,
-      IonLabel,
-      IonList,
-      IonListHeader,
-      IonSkeletonText,
-      IonThumbnail,
-    },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/spinner/basic/vue.md b/static/usage/v7/spinner/basic/vue.md
index 089b9fb6da8..e12bd51515a 100644
--- a/static/usage/v7/spinner/basic/vue.md
+++ b/static/usage/v7/spinner/basic/vue.md
@@ -51,12 +51,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonSpinner } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonSpinner },
-  });
 </script>
 ```
diff --git a/static/usage/v7/spinner/theming/colors/vue.md b/static/usage/v7/spinner/theming/colors/vue.md
index c45f320c7ed..017f999ce8c 100644
--- a/static/usage/v7/spinner/theming/colors/vue.md
+++ b/static/usage/v7/spinner/theming/colors/vue.md
@@ -12,12 +12,7 @@
   <ion-spinner color="dark"></ion-spinner>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSpinner } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSpinner },
-  });
 </script>
 ```
diff --git a/static/usage/v7/spinner/theming/css-properties/vue.md b/static/usage/v7/spinner/theming/css-properties/vue.md
index c818d2c7488..4d1f195be67 100644
--- a/static/usage/v7/spinner/theming/css-properties/vue.md
+++ b/static/usage/v7/spinner/theming/css-properties/vue.md
@@ -3,13 +3,8 @@
   <ion-spinner></ion-spinner>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSpinner } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSpinner },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/spinner/theming/resizing/vue.md b/static/usage/v7/spinner/theming/resizing/vue.md
index 52ae17f7694..563a7ea38e9 100644
--- a/static/usage/v7/spinner/theming/resizing/vue.md
+++ b/static/usage/v7/spinner/theming/resizing/vue.md
@@ -3,13 +3,8 @@
   <ion-spinner></ion-spinner>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonSpinner } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSpinner },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/split-pane/basic/vue.md b/static/usage/v7/split-pane/basic/vue.md
index 81f9dbd9a6b..eab2924fd6b 100644
--- a/static/usage/v7/split-pane/basic/vue.md
+++ b/static/usage/v7/split-pane/basic/vue.md
@@ -21,12 +21,7 @@
   </ion-split-pane>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md
index f0abcf95800..ffdbb6343e1 100644
--- a/static/usage/v7/split-pane/theming/css-properties/vue.md
+++ b/static/usage/v7/split-pane/theming/css-properties/vue.md
@@ -21,13 +21,8 @@
   </ion-split-pane>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/tabs/router/vue.md b/static/usage/v7/tabs/router/vue.md
index 091cabaa6f8..b489f0d3e73 100644
--- a/static/usage/v7/tabs/router/vue.md
+++ b/static/usage/v7/tabs/router/vue.md
@@ -70,12 +70,7 @@
   </ion-tabs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTabs, IonTabBar, IonTabButton, IonContent, IonHeader, IonTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar, IonTabButton, IonContent, IonHeader, IonTitle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/tabs/router/vue/app_vue.md b/static/usage/v7/tabs/router/vue/app_vue.md
index b5f330406db..0b0450daca8 100644
--- a/static/usage/v7/tabs/router/vue/app_vue.md
+++ b/static/usage/v7/tabs/router/vue/app_vue.md
@@ -5,16 +5,8 @@
   </ion-app>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonApp, IonRouterOutlet } from '@ionic/vue';
-
-  import { defineComponent } from 'vue';
-
   import Example from './components/Example.vue';
-
-  export default defineComponent({
-    name: 'App',
-    components: { IonApp, IonRouterOutlet },
-  });
 </script>
 ```
diff --git a/static/usage/v7/tabs/router/vue/example_vue.md b/static/usage/v7/tabs/router/vue/example_vue.md
index 846b8b4d621..a59a1d5784a 100644
--- a/static/usage/v7/tabs/router/vue/example_vue.md
+++ b/static/usage/v7/tabs/router/vue/example_vue.md
@@ -28,21 +28,8 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/vue';
-
   import { playCircle, radio, library, search } from 'ionicons/icons';
-
-  export default {
-    components: { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon },
-    data() {
-      return {
-        playCircle,
-        radio,
-        library,
-        search,
-      };
-    },
-  };
 </script>
 ```
diff --git a/static/usage/v7/tabs/router/vue/home_page_vue.md b/static/usage/v7/tabs/router/vue/home_page_vue.md
index 9d809b9a70d..ce5c59ddcac 100644
--- a/static/usage/v7/tabs/router/vue/home_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/home_page_vue.md
@@ -21,11 +21,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
-  export default {
-    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
-  };
 </script>
 ```
diff --git a/static/usage/v7/tabs/router/vue/library_page_vue.md b/static/usage/v7/tabs/router/vue/library_page_vue.md
index b46e1dec9d7..e25ad802ba5 100644
--- a/static/usage/v7/tabs/router/vue/library_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/library_page_vue.md
@@ -21,11 +21,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
-  export default {
-    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
-  };
 </script>
 ```
diff --git a/static/usage/v7/tabs/router/vue/radio_page_vue.md b/static/usage/v7/tabs/router/vue/radio_page_vue.md
index 5f65a8963cf..6ee82832885 100644
--- a/static/usage/v7/tabs/router/vue/radio_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/radio_page_vue.md
@@ -21,11 +21,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
-  export default {
-    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
-  };
 </script>
 ```
diff --git a/static/usage/v7/tabs/router/vue/search_page_vue.md b/static/usage/v7/tabs/router/vue/search_page_vue.md
index f85eeb9c649..6d2ee2d3d2b 100644
--- a/static/usage/v7/tabs/router/vue/search_page_vue.md
+++ b/static/usage/v7/tabs/router/vue/search_page_vue.md
@@ -21,11 +21,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
-  export default {
-    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
-  };
 </script>
 ```
diff --git a/static/usage/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md
index b34cd3d437a..f1ca97719fc 100644
--- a/static/usage/v7/text/basic/vue.md
+++ b/static/usage/v7/text/basic/vue.md
@@ -21,18 +21,8 @@
   </p>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonIcon, IonText } from '@ionic/vue';
   import { warning } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon, IonText },
-    setup() {
-      return {
-        warning,
-      };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md
index 693814464e8..086bbcfa85b 100644
--- a/static/usage/v7/textarea/autogrow/vue.md
+++ b/static/usage/v7/textarea/autogrow/vue.md
@@ -10,12 +10,7 @@
   </ion-item>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonTextarea },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/basic/vue.md b/static/usage/v7/textarea/basic/vue.md
index 8b5c3a00746..6bc024c61b3 100644
--- a/static/usage/v7/textarea/basic/vue.md
+++ b/static/usage/v7/textarea/basic/vue.md
@@ -13,12 +13,7 @@
   </ion-list>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonItem, IonList, IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonTextarea },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/clear-on-edit/vue.md b/static/usage/v7/textarea/clear-on-edit/vue.md
index 04deb37bf1e..5ffea253874 100644
--- a/static/usage/v7/textarea/clear-on-edit/vue.md
+++ b/static/usage/v7/textarea/clear-on-edit/vue.md
@@ -6,12 +6,7 @@
   ></ion-textarea>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/counter/vue.md b/static/usage/v7/textarea/counter/vue.md
index aa45a84b5f6..7c100f2cfe9 100644
--- a/static/usage/v7/textarea/counter/vue.md
+++ b/static/usage/v7/textarea/counter/vue.md
@@ -11,17 +11,11 @@
   ></ion-textarea>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonTextarea },
-    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/textarea/fill/vue.md b/static/usage/v7/textarea/fill/vue.md
index 24c0f1b1d54..d90748fe57c 100644
--- a/static/usage/v7/textarea/fill/vue.md
+++ b/static/usage/v7/textarea/fill/vue.md
@@ -12,12 +12,7 @@
   ></ion-textarea>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/helper-error/vue.md b/static/usage/v7/textarea/helper-error/vue.md
index 36412d18029..dd03797bdb5 100644
--- a/static/usage/v7/textarea/helper-error/vue.md
+++ b/static/usage/v7/textarea/helper-error/vue.md
@@ -12,36 +12,31 @@
   ></ion-textarea>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-    methods: {
-      validateEmail(email) {
-        return email.match(
-          /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-        );
-      },
-
-      validate(event) {
-        const value = event.target.value;
-
-        this.$refs.input.$el.classList.remove('ion-valid');
-        this.$refs.input.$el.classList.remove('ion-invalid');
-
-        if (value === '') return;
-
-        this.validateEmail(value)
-          ? this.$refs.input.$el.classList.add('ion-valid')
-          : this.$refs.input.$el.classList.add('ion-invalid');
-      },
-
-      markTouched() {
-        this.$refs.input.$el.classList.add('ion-touched');
-      },
-    },
-  });
+  import { ref } from 'vue';
+
+  const input = ref();
+
+  const validateEmail = (email) => {
+    return email.match(
+      /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    );
+  };
+
+  const validate = (event) => {
+    const value = event.target.value;
+
+    input.value.$el.classList.remove('ion-valid');
+    input.value.$el.classList.remove('ion-invalid');
+
+    if (value === '') return;
+
+    validateEmail(value) ? input.value.$el.classList.add('ion-valid') : input.value.$el.classList.add('ion-invalid');
+  };
+
+  const markTouched = () => {
+    input.value.$el.classList.add('ion-touched');
+  };
 </script>
 ```
diff --git a/static/usage/v7/textarea/label-placement/vue.md b/static/usage/v7/textarea/label-placement/vue.md
index fa6bf5ec893..ed0e760f16e 100644
--- a/static/usage/v7/textarea/label-placement/vue.md
+++ b/static/usage/v7/textarea/label-placement/vue.md
@@ -16,12 +16,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTextarea, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/label-slot/vue.md b/static/usage/v7/textarea/label-slot/vue.md
index 0c5d90db33c..cd3fa2d3f67 100644
--- a/static/usage/v7/textarea/label-slot/vue.md
+++ b/static/usage/v7/textarea/label-slot/vue.md
@@ -9,12 +9,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTextarea, IonItem, IonList, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea, IonItem, IonList, IonText },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/no-visible-label/vue.md b/static/usage/v7/textarea/no-visible-label/vue.md
index fc77027d770..c889e88da2d 100644
--- a/static/usage/v7/textarea/no-visible-label/vue.md
+++ b/static/usage/v7/textarea/no-visible-label/vue.md
@@ -7,12 +7,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTextarea, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/start-end-slots/vue.md b/static/usage/v7/textarea/start-end-slots/vue.md
index 629240c1456..8864b474914 100644
--- a/static/usage/v7/textarea/start-end-slots/vue.md
+++ b/static/usage/v7/textarea/start-end-slots/vue.md
@@ -12,22 +12,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/vue';
   import { eye, lockClosed } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonItem,
-      IonList,
-      IonTextarea,
-    },
-    setup() {
-      return { eye, lockClosed };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
index 8af2efe5c45..c2bbe7c9c48 100644
--- a/static/usage/v7/textarea/theming/vue.md
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -28,12 +28,7 @@
   ></ion-textarea>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-  });
 </script>
 ```
diff --git a/static/usage/v7/theming/automatic-dark-mode/vue.md b/static/usage/v7/theming/automatic-dark-mode/vue.md
index 45dd5f8d9a5..94db20b33cf 100644
--- a/static/usage/v7/theming/automatic-dark-mode/vue.md
+++ b/static/usage/v7/theming/automatic-dark-mode/vue.md
@@ -45,7 +45,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonBackButton,
     IonButton,
@@ -63,42 +63,19 @@
     IonToolbar,
   } from '@ionic/vue';
   import { personCircle, personCircleOutline, sunnyOutline, sunny } from 'ionicons/icons';
-  import { defineComponent, ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonBackButton,
-      IonButton,
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonIcon,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonListHeader,
-      IonRange,
-      IonText,
-      IonToggle,
-      IonToolbar,
-    },
-    setup() {
-      // Use matchMedia to check the user preference
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+  // Use matchMedia to check the user preference
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
 
-      // Add or remove the "dark" class on the document body
-      const toggleDarkTheme = (shouldAdd) => {
-        document.body.classList.toggle('dark', shouldAdd);
-      };
+  // Add or remove the "dark" class on the document body
+  const toggleDarkTheme = (shouldAdd) => {
+    document.body.classList.toggle('dark', shouldAdd);
+  };
 
-      toggleDarkTheme(prefersDark.matches);
+  toggleDarkTheme(prefersDark.matches);
 
-      // Listen for changes to the prefers-color-scheme media query
-      prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
-
-      return { personCircle, personCircleOutline, sunnyOutline, sunny, toggleDarkTheme };
-    },
-  });
+  // Listen for changes to the prefers-color-scheme media query
+  prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
 </script>
 
 <style>
diff --git a/static/usage/v7/theming/manual-dark-mode/vue.md b/static/usage/v7/theming/manual-dark-mode/vue.md
index ec2dd6c2880..5e6ca871a53 100644
--- a/static/usage/v7/theming/manual-dark-mode/vue.md
+++ b/static/usage/v7/theming/manual-dark-mode/vue.md
@@ -53,7 +53,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     IonBackButton,
     IonButton,
@@ -72,66 +72,35 @@
   } from '@ionic/vue';
   import type { ToggleCustomEvent } from '@ionic/vue';
   import { personCircle, personCircleOutline, sunnyOutline, sunny } from 'ionicons/icons';
-  import { defineComponent, ref } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonBackButton,
-      IonButton,
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonIcon,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonListHeader,
-      IonRange,
-      IonText,
-      IonToggle,
-      IonToolbar,
-    },
-    setup() {
-      const themeToggle = ref(false);
-
-      // Use matchMedia to check the user preference
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-
-      // Add or remove the "dark" class on the document body
-      const toggleDarkTheme = (shouldAdd) => {
-        document.body.classList.toggle('dark', shouldAdd);
-      };
-
-      // Check/uncheck the toggle and update the theme based on isDark
-      const initializeDarkTheme = (isDark) => {
-        themeToggle.value = isDark;
-        toggleDarkTheme(isDark);
-      };
-
-      // Initialize the dark theme based on the initial
-      // value of the prefers-color-scheme media query
-      initializeDarkTheme(prefersDark.matches);
-
-      // Listen for changes to the prefers-color-scheme media query
-      prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
-
-      // Listen for the toggle check/uncheck to toggle the dark theme
-      const toggleChange = (event: ToggleCustomEvent) => {
-        toggleDarkTheme(event.detail.checked);
-      };
-
-      return {
-        personCircle,
-        personCircleOutline,
-        sunnyOutline,
-        sunny,
-        initializeDarkTheme,
-        toggleChange,
-        toggleDarkTheme,
-        themeToggle,
-      };
-    },
-  });
+  import { ref } from 'vue';
+
+  const themeToggle = ref(false);
+
+  // Use matchMedia to check the user preference
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+  // Add or remove the "dark" class on the document body
+  const toggleDarkTheme = (shouldAdd) => {
+    document.body.classList.toggle('dark', shouldAdd);
+  };
+
+  // Check/uncheck the toggle and update the theme based on isDark
+  const initializeDarkTheme = (isDark) => {
+    themeToggle.value = isDark;
+    toggleDarkTheme(isDark);
+  };
+
+  // Initialize the dark theme based on the initial
+  // value of the prefers-color-scheme media query
+  initializeDarkTheme(prefersDark.matches);
+
+  // Listen for changes to the prefers-color-scheme media query
+  prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
+
+  // Listen for the toggle check/uncheck to toggle the dark theme
+  const toggleChange = (event: ToggleCustomEvent) => {
+    toggleDarkTheme(event.detail.checked);
+  };
 </script>
 
 <style>
diff --git a/static/usage/v7/thumbnail/basic/vue.md b/static/usage/v7/thumbnail/basic/vue.md
index 74afde558d4..86f3517b6fc 100644
--- a/static/usage/v7/thumbnail/basic/vue.md
+++ b/static/usage/v7/thumbnail/basic/vue.md
@@ -5,12 +5,7 @@
   </ion-thumbnail>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonThumbnail } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonThumbnail },
-  });
 </script>
 ```
diff --git a/static/usage/v7/thumbnail/item/vue.md b/static/usage/v7/thumbnail/item/vue.md
index 4e688f05030..e58ea0c89ae 100644
--- a/static/usage/v7/thumbnail/item/vue.md
+++ b/static/usage/v7/thumbnail/item/vue.md
@@ -8,12 +8,7 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonThumbnail },
-  });
 </script>
 ```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/vue.md b/static/usage/v7/thumbnail/theming/css-properties/vue.md
index bd772024b00..7f462aa835b 100644
--- a/static/usage/v7/thumbnail/theming/css-properties/vue.md
+++ b/static/usage/v7/thumbnail/theming/css-properties/vue.md
@@ -12,12 +12,7 @@
   </ion-thumbnail>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonThumbnail } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonThumbnail },
-  });
 </script>
 ```
diff --git a/static/usage/v7/title/basic/vue.md b/static/usage/v7/title/basic/vue.md
index 99a7ee20224..8dcdf94e9a4 100644
--- a/static/usage/v7/title/basic/vue.md
+++ b/static/usage/v7/title/basic/vue.md
@@ -7,12 +7,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonToolbar, IonTitle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonToolbar, IonTitle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/vue.md b/static/usage/v7/title/collapsible-large-title/basic/vue.md
index de922b98bca..eaed784e824 100644
--- a/static/usage/v7/title/collapsible-large-title/basic/vue.md
+++ b/static/usage/v7/title/collapsible-large-title/basic/vue.md
@@ -39,12 +39,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem },
-  });
 </script>
 ```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/vue.md b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
index 2c23d8982ad..ee775370d61 100644
--- a/static/usage/v7/title/collapsible-large-title/buttons/vue.md
+++ b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
@@ -45,12 +45,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton },
-  });
 </script>
 ```
diff --git a/static/usage/v7/title/theming/css-properties/vue.md b/static/usage/v7/title/theming/css-properties/vue.md
index dc85c93d3ab..2fb3aee914c 100644
--- a/static/usage/v7/title/theming/css-properties/vue.md
+++ b/static/usage/v7/title/theming/css-properties/vue.md
@@ -51,12 +51,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
index d76b30f18d9..b5dd11510b5 100644
--- a/static/usage/v7/toast/buttons/vue.md
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -10,41 +10,29 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonToast } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonToast },
-    setup() {
-      const handlerMessage = ref('');
-      const roleMessage = ref('');
-      const toastButtons = [
-        {
-          text: 'More Info',
-          role: 'info',
-          handler: () => {
-            console.log('More Info clicked');
-          },
-        },
-        {
-          text: 'Dismiss',
-          role: 'cancel',
-          handler: () => {
-            console.log('Dismiss clicked');
-          },
-        },
-      ];
-      const handleDismiss = (event: CustomEvent) => {
-        const { role } = event.detail;
-        console.log(`Dismissed with role: ${role}`);
-      };
-
-      return {
-        toastButtons,
-        handleDismiss,
-      };
+  const toastButtons = [
+    {
+      text: 'More Info',
+      role: 'info',
+      handler: () => {
+        console.log('More Info clicked');
+      },
+    },
+    {
+      text: 'Dismiss',
+      role: 'cancel',
+      handler: () => {
+        console.log('Dismiss clicked');
+      },
     },
-  });
+  ];
+
+  const handleDismiss = (event: CustomEvent) => {
+    const { role } = event.detail;
+    console.log(`Dismissed with role: ${role}`);
+  };
 </script>
 ```
diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md
index 223e37b3222..7e7273e0065 100644
--- a/static/usage/v7/toast/icon/vue.md
+++ b/static/usage/v7/toast/icon/vue.md
@@ -4,17 +4,8 @@
   <ion-toast trigger="open-toast" message="Hello World!" :duration="3000" :icon="globe"></ion-toast>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonToast } from '@ionic/vue';
   import { globe } from 'ionicons/icons';
-
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonToast },
-    setup() {
-      return { globe };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md
index 1b81018bcdb..8b0024f1729 100644
--- a/static/usage/v7/toast/inline/basic/vue.md
+++ b/static/usage/v7/toast/inline/basic/vue.md
@@ -12,19 +12,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonToast } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonHeader,
-      IonContent,
-      IonToolbar,
-      IonTitle,
-      IonToast,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toast/inline/is-open/vue.md b/static/usage/v7/toast/inline/is-open/vue.md
index b1c9c88ffb1..2f0f8ca0421 100644
--- a/static/usage/v7/toast/inline/is-open/vue.md
+++ b/static/usage/v7/toast/inline/is-open/vue.md
@@ -16,20 +16,13 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonHeader, IonToolbar, IonContent, IonTitle, IonToast },
-    setup() {
-      const isOpen = ref(false);
-      const setOpen = (state: boolean) => {
-        isOpen.value = state;
-      };
-
-      return { isOpen, setOpen };
-    },
-  });
+  const isOpen = ref(false);
+  const setOpen = (state: boolean) => {
+    isOpen.value = state;
+  };
 </script>
 ```
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
index 18f11de56c3..cc430ec1d20 100644
--- a/static/usage/v7/toast/layout/vue.md
+++ b/static/usage/v7/toast/layout/vue.md
@@ -17,21 +17,13 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonToast } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton, IonToast },
-    setup() {
-      const toastButtons = [
-        {
-          text: 'Action With Long Text'
-        }
-      ]
-
-      return toastButtons }
-    }
-  });
+  const toastButtons = [
+    {
+      text: 'Action With Long Text',
+    },
+  ];
 </script>
 ```
diff --git a/static/usage/v7/toast/position-anchor/vue.md b/static/usage/v7/toast/position-anchor/vue.md
index b06b61b44da..9d4c5020691 100644
--- a/static/usage/v7/toast/position-anchor/vue.md
+++ b/static/usage/v7/toast/position-anchor/vue.md
@@ -33,20 +33,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonContent,
-      IonFooter,
-      IonHeader,
-      IonTitle,
-      IonToast,
-      IonToolbar,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toast/presenting/controller/vue.md b/static/usage/v7/toast/presenting/controller/vue.md
index 7f2ade91031..e180abc18ea 100644
--- a/static/usage/v7/toast/presenting/controller/vue.md
+++ b/static/usage/v7/toast/presenting/controller/vue.md
@@ -5,22 +5,17 @@
   <ion-button expand="block" @click="presentToast('bottom')">Present Toast At the Bottom</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, toastController } from '@ionic/vue';
 
-  export default {
-    components: { IonButton },
-    methods: {
-      async presentToast(position: 'top' | 'middle' | 'bottom') {
-        const toast = await toastController.create({
-          message: 'Hello World!',
-          duration: 1500,
-          position: position,
-        });
+  const presentToast = async (position: 'top' | 'middle' | 'bottom') => {
+    const toast = await toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position,
+    });
 
-        await toast.present();
-      },
-    },
+    await toast.present();
   };
 </script>
 ```
diff --git a/static/usage/v7/toast/theming/vue.md b/static/usage/v7/toast/theming/vue.md
index 264e4b1ee57..1a4295f211c 100644
--- a/static/usage/v7/toast/theming/vue.md
+++ b/static/usage/v7/toast/theming/vue.md
@@ -10,22 +10,15 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonToast } from '@ionic/vue';
 
-  export default {
-    components: { IonButton, IonToast },
-    setup() {
-      const toastButtons = [
-        {
-          text: 'Dismiss',
-          role: 'cancel',
-        },
-      ];
-
-      return { toastButtons };
+  const toastButtons = [
+    {
+      text: 'Dismiss',
+      role: 'cancel',
     },
-  };
+  ];
 </script>
 
 <style>
diff --git a/static/usage/v7/toggle/alignment/vue.md b/static/usage/v7/toggle/alignment/vue.md
index b3bce543aa6..6fc033875f6 100644
--- a/static/usage/v7/toggle/alignment/vue.md
+++ b/static/usage/v7/toggle/alignment/vue.md
@@ -4,14 +4,7 @@
   <ion-toggle label-placement="stacked" alignment="center">Aligned to the Center</ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonToggle,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/basic/vue.md b/static/usage/v7/toggle/basic/vue.md
index cb5396e7abf..47042597850 100644
--- a/static/usage/v7/toggle/basic/vue.md
+++ b/static/usage/v7/toggle/basic/vue.md
@@ -6,12 +6,7 @@
   <ion-toggle :checked="true" :disabled="true">Disabled Checked Toggle</ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/justify/vue.md b/static/usage/v7/toggle/justify/vue.md
index ca48ab5d311..31973dbab52 100644
--- a/static/usage/v7/toggle/justify/vue.md
+++ b/static/usage/v7/toggle/justify/vue.md
@@ -13,12 +13,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/label-placement/vue.md b/static/usage/v7/toggle/label-placement/vue.md
index c9cfea701e1..ab46fe9fc9f 100644
--- a/static/usage/v7/toggle/label-placement/vue.md
+++ b/static/usage/v7/toggle/label-placement/vue.md
@@ -6,12 +6,7 @@
   <ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/list/vue.md b/static/usage/v7/toggle/list/vue.md
index 98e183a7f4b..d93e0118f01 100644
--- a/static/usage/v7/toggle/list/vue.md
+++ b/static/usage/v7/toggle/list/vue.md
@@ -13,12 +13,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonList, IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonList, IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/on-off/vue.md b/static/usage/v7/toggle/on-off/vue.md
index 040df1266da..5b5ba3aea20 100644
--- a/static/usage/v7/toggle/on-off/vue.md
+++ b/static/usage/v7/toggle/on-off/vue.md
@@ -3,12 +3,7 @@
   <ion-toggle :enable-on-off-labels="true">Enable Notifications</ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/theming/colors/vue.md b/static/usage/v7/toggle/theming/colors/vue.md
index 453255eba8f..f74d7390e14 100644
--- a/static/usage/v7/toggle/theming/colors/vue.md
+++ b/static/usage/v7/toggle/theming/colors/vue.md
@@ -11,12 +11,7 @@
   <ion-toggle aria-label="Dark toggle" color="dark" :checked="true"></ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toggle/theming/css-properties/vue.md b/static/usage/v7/toggle/theming/css-properties/vue.md
index ce78a13989a..5419779fb30 100644
--- a/static/usage/v7/toggle/theming/css-properties/vue.md
+++ b/static/usage/v7/toggle/theming/css-properties/vue.md
@@ -4,13 +4,8 @@
   <ion-toggle :checked="true" aria-label="Enable Notifications"></ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
index cdced277639..0f0bd7d0728 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
@@ -4,13 +4,8 @@
   <ion-toggle :checked="true" aria-label="Enable Notifications"></ion-toggle>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 
 <style scoped>
diff --git a/static/usage/v7/toolbar/basic/vue.md b/static/usage/v7/toolbar/basic/vue.md
index ec71b1a340b..130b4e692e8 100644
--- a/static/usage/v7/toolbar/basic/vue.md
+++ b/static/usage/v7/toolbar/basic/vue.md
@@ -13,12 +13,7 @@
   </ion-footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonFooter, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/buttons/vue.md b/static/usage/v7/toolbar/buttons/vue.md
index 68091a20771..7a841ba2737 100644
--- a/static/usage/v7/toolbar/buttons/vue.md
+++ b/static/usage/v7/toolbar/buttons/vue.md
@@ -84,16 +84,8 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
   import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
-    setup() {
-      return { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/progress-bars/vue.md b/static/usage/v7/toolbar/progress-bars/vue.md
index 2b3a3b85d0c..4cc4a0d2d8b 100644
--- a/static/usage/v7/toolbar/progress-bars/vue.md
+++ b/static/usage/v7/toolbar/progress-bars/vue.md
@@ -8,12 +8,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonProgressBar, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/searchbars/vue.md b/static/usage/v7/toolbar/searchbars/vue.md
index 8543a2ef976..c5a1d953a39 100644
--- a/static/usage/v7/toolbar/searchbars/vue.md
+++ b/static/usage/v7/toolbar/searchbars/vue.md
@@ -10,12 +10,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonSearchbar, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/segments/vue.md b/static/usage/v7/toolbar/segments/vue.md
index b31855bf734..84704bc878c 100644
--- a/static/usage/v7/toolbar/segments/vue.md
+++ b/static/usage/v7/toolbar/segments/vue.md
@@ -14,12 +14,7 @@
   </ion-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/theming/colors/vue.md b/static/usage/v7/toolbar/theming/colors/vue.md
index d71cb7a3c05..e9f4ab0ffa0 100644
--- a/static/usage/v7/toolbar/theming/colors/vue.md
+++ b/static/usage/v7/toolbar/theming/colors/vue.md
@@ -32,12 +32,7 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTitle, IonToolbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/toolbar/theming/css-properties/vue.md b/static/usage/v7/toolbar/theming/css-properties/vue.md
index 17d8653117c..b38a6cbc7cd 100644
--- a/static/usage/v7/toolbar/theming/css-properties/vue.md
+++ b/static/usage/v7/toolbar/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
   </ion-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>