diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t
index a22edd2b2b4..3779af3113b 100644
--- a/_templates/playground/new/vue.md.ejs.t
+++ b/_templates/playground/new/vue.md.ejs.t
@@ -7,15 +7,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
   <<%= component %>></<%= component %>>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { <%= pascalComponent %> } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      <%= pascalComponent %>,
-    },
-  });
 </script>
 <% if (css){ -%>
 
diff --git a/static/usage/v7/accordion/accessibility/animations/vue.md b/static/usage/v7/accordion/accessibility/animations/vue.md
index 05847edab7b..632621029e9 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">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/basic/vue.md b/static/usage/v7/accordion/basic/vue.md
index 8ac8c6bbeec..8c26e42b96b 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 lang="ts" setup>
   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..f6f673aad4f 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 lang="ts" setup>
   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..8d5ab0ec26e 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 lang="ts" setup>
   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..c02668b8aca 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 lang="ts" setup>
   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..117c54cf2be 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 lang="ts" setup>
   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..d139bde4afb 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">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/disable/group/vue.md b/static/usage/v7/accordion/disable/group/vue.md
index 6c9e3567845..d139bde4afb 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">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/disable/individual/vue.md b/static/usage/v7/accordion/disable/individual/vue.md
index dc26bc3b11f..d4ae8e63566 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">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
index 0086a788ac0..fc6260d2f2a 100644
--- a/static/usage/v7/accordion/listen-changes/vue.md
+++ b/static/usage/v7/accordion/listen-changes/vue.md
@@ -24,35 +24,24 @@
   <p ref="listenerOut"></p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-    setup() {
-      const listenerOut = ref(null);
-      const values = ['first', 'second', 'third'];
-      const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-        if (!listenerOut.value) {
-          return;
-        }
+  const listenerOut = ref(null);
+  const values = ['first', 'second', 'third'];
+  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+    if (!listenerOut.value) {
+      return;
+    }
 
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+    const collapsedItems = values.filter((value) => value !== ev.detail.value);
+    const selectedValue = ev.detail.value;
 
-        listenerOut.value.innerText = `
-          Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
-          Collapsed: ${collapsedItems.join(', ')}
-        `;
-      };
-      return { listenerOut, accordionGroupChange };
-    },
-  });
+    listenerOut.value.innerText = `
+      Expanded: ${selectedValue === undefined ? 'None' : ev.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..902fa36f7b0 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 lang="ts" setup>
   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..e12c07c0727 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 lang="ts" setup>
   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..3c813d85be3 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 lang="ts" setup>
   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..d88a9a09b3f 100644
--- a/static/usage/v7/accordion/toggle/vue.md
+++ b/static/usage/v7/accordion/toggle/vue.md
@@ -24,35 +24,22 @@
   <ion-button @click="toggleAccordion()">Toggle Second Accordion</ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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);
+  const toggleAccordion = () => {
+    if (!accordionGroup.value) {
+      return;
+    }
+    const nativeEl = accordionGroup.value.$el;
 
-        if (nativeEl.value === 'second') {
-          nativeEl.value = undefined;
-        } else {
-          nativeEl.value = 'second';
-        }
-      };
-
-      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..4be2504e160 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 lang="ts" setup>
   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..6bbcec0a0c1 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 lang="ts" setup>
   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..1466d15fb64 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 lang="ts" setup>
   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 eebfdef1169..788aef5db95 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
@@ -28,47 +28,36 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { IonActionSheet, IonButton } from '@ionic/vue';
 
-  export default {
-    components: { IonActionSheet, IonButton },
-    setup() {
-      const result = ref('');
-      const actionSheetButtons = [
-        {
-          text: 'Delete',
-          role: 'destructive',
-          data: {
-            action: 'delete',
-          },
-        },
-        {
-          text: 'Share',
-          data: {
-            action: 'share',
-          },
-        },
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          data: {
-            action: 'cancel',
-          },
-        },
-      ];
-
-      const setResult = (ev: CustomEvent) => {
-        result.value = JSON.stringify(ev.detail, null, 2);
-      };
-
-      return {
-        result,
-        actionSheetButtons,
-        setResult,
-      };
+  const result = ref('');
+  const actionSheetButtons = [
+    {
+      text: 'Delete',
+      role: 'destructive',
+      data: {
+        action: 'delete',
+      },
+    },
+    {
+      text: 'Share',
+      data: {
+        action: 'share',
+      },
     },
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      data: {
+        action: 'cancel',
+      },
+    },
+  ];
+
+  const setResult = (ev: CustomEvent) => {
+    result.value = JSON.stringify(ev.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..937b82200b6 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 lang="ts" setup>
   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..7c2cf6bde23 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 lang="ts" setup>
   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>
 ```