From 71ddb119fa12f4918a9e4b1754b5b0f72bba21a3 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Sep 2023 16:47:10 -0400
Subject: [PATCH 01/58] accordion

---
 .../accordion/accessibility/animations/vue.md | 11 +----
 static/usage/v7/accordion/basic/vue.md        | 12 +-----
 .../advanced-expansion-styles/vue.md          | 12 +-----
 .../customization/expansion-styles/vue.md     | 12 +-----
 .../v7/accordion/customization/icons/vue.md   | 15 +------
 .../v7/accordion/customization/theming/vue.md | 15 +------
 .../usage/v7/accordion/disable-group/vue.md   | 11 +----
 .../usage/v7/accordion/disable/group/vue.md   | 11 +----
 .../v7/accordion/disable/individual/vue.md    | 11 +----
 .../usage/v7/accordion/listen-changes/vue.md  | 33 ++++-----------
 static/usage/v7/accordion/multiple/vue.md     | 12 +-----
 .../usage/v7/accordion/readonly/group/vue.md  | 12 +-----
 .../v7/accordion/readonly/individual/vue.md   | 12 +-----
 static/usage/v7/accordion/toggle/vue.md       | 41 +++++++------------
 14 files changed, 35 insertions(+), 185 deletions(-)

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 60607870264..578ddc305ad 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 lang="ts" setup>
   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 = (ev: AccordionGroupCustomEvent) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+  const values = ['first', 'second', 'third'];
+  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+    const collapsedItems = values.filter((value) => value !== ev.detail.value);
+    const selectedValue = ev.detail.value;
 
-        console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
-            ', '
-          )}`
-        );
-      };
-
-      return { accordionGroupChange };
-    },
-  });
+    console.log(
+      `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>
 ```

From e139adf689084ff07921f5ec692a0c7e430b40fd Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Sep 2023 16:55:16 -0400
Subject: [PATCH 02/58] action-sheet

---
 .../usage/v7/action-sheet/controller/vue.md   | 63 +++++++++----------
 .../v7/action-sheet/inline/isOpen/vue.md      | 63 ++++++++-----------
 .../v7/action-sheet/inline/trigger/vue.md     | 51 +++++++--------
 .../action-sheet/role-info-on-dismiss/vue.md  | 60 ++++++++----------
 .../theming/css-properties/vue.md             | 51 +++++++--------
 .../v7/action-sheet/theming/styling/vue.md    | 51 +++++++--------
 6 files changed, 145 insertions(+), 194 deletions(-)

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 6f56c29920d..e36b089cee4 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 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',
-          },
-        },
-      ];
-
-      const logResult = (ev: CustomEvent) => {
-        console.log(JSON.stringify(ev.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 = (ev: CustomEvent) => {
+    console.log(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>
 ```

From f7d213c5f1b0866de9a7be5353a2c92eb0a48c76 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 7 Sep 2023 14:13:14 -0400
Subject: [PATCH 03/58] Update playground template

---
 _templates/playground/new/vue.md.ejs.t | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

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){ -%>
 

From 4367cfa5cebed75cf6ff98e02714703b8d574053 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 12:31:55 -0500
Subject: [PATCH 04/58] backdrop

---
 static/usage/v7/backdrop/basic/vue.md   | 7 +------
 static/usage/v7/backdrop/styling/vue.md | 7 +------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
index 247b67c098b..0fc031d0a27 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 lang="ts" setup>
   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..d5dbd2b9ebb 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 lang="ts" setup>
   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>
 ```

From 3a6db20e1488a8dbf707ef4ddc330def9f543f79 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 12:40:46 -0500
Subject: [PATCH 05/58] badge

---
 static/usage/v7/badge/basic/vue.md                  | 7 +------
 static/usage/v7/badge/theming/colors/vue.md         | 7 +------
 static/usage/v7/badge/theming/css-properties/vue.md | 7 +------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/static/usage/v7/badge/basic/vue.md b/static/usage/v7/badge/basic/vue.md
index e02b9c552e3..95b35869235 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 lang="ts" setup>
   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..a29983eb27a 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 lang="ts" setup>
   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..0ab8f1d3b87 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>
   import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBadge, IonItem, IonLabel, IonList },
-  });
 </script>
 
 <style>

From 3f524850b616162be69cf5dd838136e03615920a Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:05:55 -0500
Subject: [PATCH 06/58] breadcrumbs

---
 static/usage/v7/breadcrumbs/basic/vue.md      |  7 +----
 .../collapsing-items/expand-on-click/vue.md   | 22 +++++---------
 .../items-before-after/vue.md                 |  7 +----
 .../collapsing-items/max-items/vue.md         |  7 +----
 .../collapsing-items/popover-on-click/vue.md  | 29 +++++++------------
 .../icons/custom-separators/vue.md            | 10 +------
 .../breadcrumbs/icons/icons-on-items/vue.md   | 10 +------
 .../v7/breadcrumbs/theming/colors/vue.md      |  7 +----
 .../breadcrumbs/theming/css-properties/vue.md |  7 +----
 9 files changed, 25 insertions(+), 81 deletions(-)

diff --git a/static/usage/v7/breadcrumbs/basic/vue.md b/static/usage/v7/breadcrumbs/basic/vue.md
index f665b4cb686..4b69c1890b9 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 lang="ts" setup>
   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..a71502e721b 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 lang="ts" setup>
   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<number | undefined>(4);
+
+  function 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..47bda8f3481 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 lang="ts" setup>
   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..3779ecaadf2 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 lang="ts" setup>
   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..74e69f38e7c 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 lang="ts" setup>
   import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/vue';
   import Popover from './Popover.vue';
+  import { ref } from '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);
+
+  function presentPopover(e: Event) {
+    this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
+    this.event = e;
+    this.popoverOpen = 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..5e72a26ae06 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 lang="ts" setup>
   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..faf459e7320 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 lang="ts" setup>
   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..50a0f0b09c7 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 lang="ts" setup>
   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..e552cbb5e62 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 lang="ts" setup>
   import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonBreadcrumb, IonBreadcrumbs },
-  });
 </script>
 
 <style>

From 66699726d288dd24bfcc3616f3025dd31c4f27b2 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:15:11 -0500
Subject: [PATCH 07/58] button

---
 static/usage/v7/button/basic/vue.md                  |  7 +------
 static/usage/v7/button/expand/vue.md                 |  7 +------
 static/usage/v7/button/fill/vue.md                   |  7 +------
 static/usage/v7/button/icons/vue.md                  | 10 +---------
 static/usage/v7/button/shape/vue.md                  |  7 +------
 static/usage/v7/button/size/vue.md                   |  7 +------
 static/usage/v7/button/text-wrapping/vue.md          |  7 +------
 static/usage/v7/button/theming/colors/vue.md         |  7 +------
 static/usage/v7/button/theming/css-properties/vue.md |  7 +------
 9 files changed, 9 insertions(+), 57 deletions(-)

diff --git a/static/usage/v7/button/basic/vue.md b/static/usage/v7/button/basic/vue.md
index dbd787691fb..0e8895d6d73 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 lang="ts" setup>
   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..a9b233838f2 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 lang="ts" setup>
   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..995bbcaf531 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 lang="ts" setup>
   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..09b565cbc0a 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 lang="ts" setup>
   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..5ab975dcafd 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 lang="ts" setup>
   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..b1a081f8a0b 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 lang="ts" setup>
   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..2aba13bd01e 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 lang="ts" setup>
   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..1dd7cbff39d 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 lang="ts" setup>
   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..a7d7c386195 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 lang="ts" setup>
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 
 <style scoped>

From 4b14c6283a05d69e03ae3412028aab97a777a1c0 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:20:46 -0500
Subject: [PATCH 08/58] buttons

---
 static/usage/v7/buttons/basic/vue.md     |  7 +------
 static/usage/v7/buttons/placement/vue.md |  7 +------
 static/usage/v7/buttons/types/vue.md     | 10 +---------
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/static/usage/v7/buttons/basic/vue.md b/static/usage/v7/buttons/basic/vue.md
index 3da668fcb20..a0387282fbc 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 lang="ts" setup>
   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..2f935635812 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 lang="ts" setup>
   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..26e42f1efef 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 lang="ts" setup>
   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>
 ```

From ac9c1d90685f7b0995157f70815a471408cb0cb2 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:25:50 -0500
Subject: [PATCH 09/58] card

---
 static/usage/v7/card/basic/vue.md                  | 7 +------
 static/usage/v7/card/buttons/vue.md                | 7 +------
 static/usage/v7/card/list/vue.md                   | 7 +------
 static/usage/v7/card/media/vue.md                  | 7 +------
 static/usage/v7/card/theming/colors/vue.md         | 7 +------
 static/usage/v7/card/theming/css-properties/vue.md | 7 +------
 6 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/static/usage/v7/card/basic/vue.md b/static/usage/v7/card/basic/vue.md
index aa44d9f0931..f114e152281 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 lang="ts" setup>
   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..df8568d1b89 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 lang="ts" setup>
   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..e8f53701fb8 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 lang="ts" setup>
   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..1df325765ff 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 lang="ts" setup>
   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..b366b0ebcd1 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 lang="ts" setup>
   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..a509bd6770c 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 lang="ts" setup>
   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>

From 4674420308f7fc7b8addcbf63d3c03ec81b653dc Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:29:08 -0500
Subject: [PATCH 10/58] checkbox

---
 static/usage/v7/checkbox/alignment/vue.md              | 9 +--------
 static/usage/v7/checkbox/basic/vue.md                  | 7 +------
 static/usage/v7/checkbox/indeterminate/vue.md          | 7 +------
 static/usage/v7/checkbox/justify/vue.md                | 7 +------
 static/usage/v7/checkbox/label-placement/vue.md        | 7 +------
 static/usage/v7/checkbox/theming/css-properties/vue.md | 7 +------
 6 files changed, 6 insertions(+), 38 deletions(-)

diff --git a/static/usage/v7/checkbox/alignment/vue.md b/static/usage/v7/checkbox/alignment/vue.md
index 4dffcd383aa..a4e33b9479a 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 lang="ts" setup>
   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..e9c80af496a 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 lang="ts" setup>
   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..26ffb748df3 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 lang="ts" setup>
   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..897a3e8996c 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 lang="ts" setup>
   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-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
index 3530731da53..93c571cacba 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 lang="ts" setup>
   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..fa7b2a6d301 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 lang="ts" setup>
   import { IonCheckbox } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCheckbox },
-  });
 </script>
 
 <style>

From 0e91ee37b2e5d32c060cae76e1dec0804cc7a131 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:32:02 -0500
Subject: [PATCH 11/58] chip

---
 static/usage/v7/chip/basic/vue.md                  |  7 +------
 static/usage/v7/chip/slots/vue.md                  | 14 +-------------
 static/usage/v7/chip/theming/colors/vue.md         |  7 +------
 static/usage/v7/chip/theming/css-properties/vue.md |  7 +------
 4 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/static/usage/v7/chip/basic/vue.md b/static/usage/v7/chip/basic/vue.md
index 69634b44d3e..7c17ae49fb2 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 lang="ts" setup>
   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..6b7bf6bdcfd 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 lang="ts" setup>
   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..c2fcbed7204 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 lang="ts" setup>
   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..609e94cef29 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 lang="ts" setup>
   import { IonChip } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonChip },
-  });
 </script>
 ```

From 5be175e1dad70b3b734c1463924bbf38a3a51e45 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 13:48:48 -0500
Subject: [PATCH 12/58] content

---
 static/usage/v7/content/basic/vue.md          |  7 +---
 static/usage/v7/content/fixed/vue.md          |  7 +---
 static/usage/v7/content/fullscreen/vue.md     |  7 +---
 static/usage/v7/content/header-footer/vue.md  |  7 +---
 static/usage/v7/content/scroll-events/vue.md  | 28 +++++++---------
 static/usage/v7/content/scroll-methods/vue.md | 32 +++++++++----------
 static/usage/v7/content/theming/colors/vue.md |  7 +---
 .../v7/content/theming/css-properties/vue.md  |  7 +---
 .../content/theming/css-shadow-parts/vue.md   |  7 +---
 .../usage/v7/content/theming/safe-area/vue.md |  9 +-----
 10 files changed, 35 insertions(+), 83 deletions(-)

diff --git a/static/usage/v7/content/basic/vue.md b/static/usage/v7/content/basic/vue.md
index 84e2e35470e..f75b6b24885 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 lang="ts" setup>
   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..929fed9ff50 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 lang="ts" setup>
   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..58fb09ea268 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 lang="ts" setup>
   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..0b73a444863 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 lang="ts" setup>
   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 1b8bada7d57..eb9698e36e6 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 lang="ts" setup>
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent },
-    methods: {
-      handleScrollStart() {
-        console.log('scroll start');
-      },
-      handleScroll(ev: CustomEvent) {
-        console.log('scroll', JSON.stringify(ev.detail));
-      },
-      handleScrollEnd() {
-        console.log('scroll end');
-      },
-    },
-  });
+  function handleScrollStart() {
+    console.log('scroll start');
+  }
+
+  function handleScroll(ev: CustomEvent) {
+    console.log('scroll', JSON.stringify(ev.detail));
+  }
+
+  function 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..5a4233bf267 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 lang="ts" setup>
   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(null);
+
+  function 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);
+  }
+
+  function 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..45fe11425fb 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 lang="ts" setup>
   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..2527afe3acb 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 lang="ts" setup>
   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..7d752a3c38d 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 lang="ts" setup>
   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..b38aecc9bac 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 lang="ts" setup>
   import { IonContent } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-    },
-  });
 </script>
 
 <style>

From 7b5a6254b436111d8aa7f73606a390b6d9e583b8 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 14:32:51 -0500
Subject: [PATCH 13/58] datetime

---
 static/usage/v7/datetime/basic/vue.md         |  7 +--
 .../buttons/customizing-button-texts/vue.md   |  7 +--
 .../buttons/customizing-buttons/vue.md        | 21 ++++----
 .../showing-confirmation-buttons/vue.md       |  7 +--
 .../datetime/date-constraints/advanced/vue.md | 28 ++++------
 .../datetime/date-constraints/max-min/vue.md  |  7 +--
 .../datetime/date-constraints/values/vue.md   |  7 +--
 .../v7/datetime/highlightedDates/array/vue.md | 52 ++++++++-----------
 .../datetime/highlightedDates/callback/vue.md | 42 ++++++---------
 .../localization/custom-locale/vue.md         |  7 +--
 .../localization/first-day-of-week/vue.md     |  7 +--
 .../datetime/localization/hour-cycle/vue.md   |  7 +--
 .../localization/locale-extension-tags/vue.md |  7 +--
 .../datetime/localization/time-label/vue.md   |  7 +--
 static/usage/v7/datetime/multiple/vue.md      |  7 +--
 .../v7/datetime/presentation/date/vue.md      |  7 +--
 .../presentation/month-and-year/vue.md        |  7 +--
 .../v7/datetime/presentation/time/vue.md      |  7 +--
 .../v7/datetime/presentation/wheel/vue.md     |  7 +--
 .../v7/datetime/styling/calendar-days/vue.md  | 45 ++++++----------
 .../v7/datetime/styling/global-theming/vue.md |  7 +--
 .../v7/datetime/styling/wheel-styling/vue.md  |  7 +--
 static/usage/v7/datetime/theming/vue.md       |  7 +--
 .../datetime/title/customizing-title/vue.md   |  7 +--
 .../title/showing-default-title/vue.md        |  7 +--
 25 files changed, 95 insertions(+), 233 deletions(-)

diff --git a/static/usage/v7/datetime/basic/vue.md b/static/usage/v7/datetime/basic/vue.md
index cc68b9ab44a..27459806b39 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 lang="ts" setup>
   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..3ff4868721f 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 lang="ts" setup>
   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..4bfb943ffd6 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
@@ -9,19 +9,16 @@
   </ion-datetime>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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..a3ea9f39587 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 lang="ts" setup>
   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..a64de0f5392 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 lang="ts" setup>
   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..df584eee68d 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 lang="ts" setup>
   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..55a78d20a57 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 lang="ts" setup>
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
index 408f58f2833..74c1be1ae57 100644
--- a/static/usage/v7/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -3,38 +3,30 @@
   <ion-datetime presentation="date" value="2023-01-01" :highlighted-dates="highlightedDates"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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',
+    },
+    {
+      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)',
     },
-  });
+  ];
 </script>
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
index e916b2cef1b..dbc55e29779 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -3,36 +3,28 @@
   <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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',
+      };
+    }
 
-        return undefined;
+    if (utcDay % 3 === 0) {
+      return {
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       };
+    }
 
-      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..fd4bab86073 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 lang="ts" setup>
   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..9ab463f7d3b 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 lang="ts" setup>
   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..0d2ad759efe 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 lang="ts" setup>
   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..a2aca8534be 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 lang="ts" setup>
   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..b9dd89564a7 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 lang="ts" setup>
   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..67af1ef7bfa 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 lang="ts" setup>
   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..2764ba52660 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 lang="ts" setup>
   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..eee8d68bbe7 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 lang="ts" setup>
   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..99bd30fb54b 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 lang="ts" setup>
   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..009eecb0e18 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 lang="ts" setup>
   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..310b711e422 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 lang="ts" setup>
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonDatetime,
-    },
-    setup() {
-      let datetime = ref('');
+  const 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
+  const dayChange = ref(-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.value <= 0) {
+    dayChange.value = -dayChange.value;
+  }
 
-      return {
-        datetime,
-      };
-    },
-  });
+  // Set the value of the datetime to the day
+  // calculated above
+  date.setDate(date.getDate() + dayChange.value);
+  datetime.value = 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..918189cad29 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 lang="ts" setup>
   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..7546da90a19 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 lang="ts" setup>
   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..918189cad29 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 lang="ts" setup>
   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..9baf774651c 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 lang="ts" setup>
   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..919ac6f5dcc 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 lang="ts" setup>
   import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
 </script>
 ```

From ae73d34e3a6bdff7de20cc68d3198dee800f2df2 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 17:38:21 -0500
Subject: [PATCH 14/58] fab

---
 static/usage/v7/datetime-button/basic/vue.md       |  7 +------
 static/usage/v7/fab/basic/vue.md                   | 10 +---------
 static/usage/v7/fab/button-sizing/vue.md           | 10 +---------
 static/usage/v7/fab/list-side/vue.md               | 10 +---------
 static/usage/v7/fab/positioning/vue.md             | 10 +---------
 static/usage/v7/fab/safe-area/vue.md               | 14 +-------------
 static/usage/v7/fab/theming/colors/vue.md          | 10 +---------
 .../v7/fab/theming/css-custom-properties/vue.md    | 10 +---------
 .../usage/v7/fab/theming/css-shadow-parts/vue.md   | 10 +---------
 9 files changed, 9 insertions(+), 82 deletions(-)

diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md
index a595c27e409..b660cf05d0a 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 lang="ts" setup>
   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/fab/basic/vue.md b/static/usage/v7/fab/basic/vue.md
index dc16daae992..daede45af20 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 lang="ts" setup>
   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..3b4d20158bb 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 lang="ts" setup>
   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..3a1d638d11d 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 lang="ts" setup>
   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..420c9177d78 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 lang="ts" setup>
   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..f941e36eca4 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 lang="ts" setup>
   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..10dd0c17096 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 lang="ts" setup>
   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..a48634fc0b5 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 lang="ts" setup>
   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..a6daed217a7 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 lang="ts" setup>
   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>

From ac34cd2cba7e153297c0168499c05507f07f37c4 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 17:42:32 -0500
Subject: [PATCH 15/58] footer

---
 static/usage/v7/footer/basic/vue.md                | 7 +------
 static/usage/v7/footer/custom-scroll-target/vue.md | 7 +------
 static/usage/v7/footer/fade/vue.md                 | 7 +------
 static/usage/v7/footer/no-border/vue.md            | 7 +------
 static/usage/v7/footer/translucent/vue.md          | 7 +------
 5 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/static/usage/v7/footer/basic/vue.md b/static/usage/v7/footer/basic/vue.md
index ed20057150d..289c3424129 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 lang="ts" setup>
   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..bcebd4009b6 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 lang="ts" setup>
   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..18c332a79b9 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 lang="ts" setup>
   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..68f4573b615 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 lang="ts" setup>
   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..a83970ced16 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 lang="ts" setup>
   import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonFooter, IonTitle, IonToolbar },
-  });
 </script>
 ```

From c1e79b77f2db4698d232e87c9d1a235174579151 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 17:51:14 -0500
Subject: [PATCH 16/58] grid

---
 static/usage/v7/grid/basic/vue.md                     | 7 +------
 static/usage/v7/grid/customizing/column-number/vue.md | 7 +------
 static/usage/v7/grid/customizing/padding/vue.md       | 7 +------
 static/usage/v7/grid/customizing/width/vue.md         | 7 +------
 static/usage/v7/grid/fixed/vue.md                     | 7 +------
 static/usage/v7/grid/horizontal-alignment/vue.md      | 7 +------
 static/usage/v7/grid/offset-responsive/vue.md         | 7 +------
 static/usage/v7/grid/offset/vue.md                    | 7 +------
 static/usage/v7/grid/push-pull-responsive/vue.md      | 7 +------
 static/usage/v7/grid/push-pull/vue.md                 | 7 +------
 static/usage/v7/grid/size-auto/vue.md                 | 7 +------
 static/usage/v7/grid/size-responsive/vue.md           | 7 +------
 static/usage/v7/grid/size/vue.md                      | 7 +------
 static/usage/v7/grid/vertical-alignment/vue.md        | 7 +------
 14 files changed, 14 insertions(+), 84 deletions(-)

diff --git a/static/usage/v7/grid/basic/vue.md b/static/usage/v7/grid/basic/vue.md
index d693fc8510d..a847141efd7 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 lang="ts" setup>
   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..16f4d11a38c 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 lang="ts" setup>
   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..5e11710364b 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 lang="ts" setup>
   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..5ac6e06147b 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 lang="ts" setup>
   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..78d815fa74d 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 lang="ts" setup>
   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..e0cf63695f9 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 lang="ts" setup>
   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..262912a22de 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 lang="ts" setup>
   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..120fadbdd7c 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 lang="ts" setup>
   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..c91fe1db4b7 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 lang="ts" setup>
   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..6747aa0b18a 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 lang="ts" setup>
   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..2b0c0878317 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 lang="ts" setup>
   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..c9bd5652b40 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 lang="ts" setup>
   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..671fe715074 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 lang="ts" setup>
   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..0c024997cf5 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 lang="ts" setup>
   import { IonCol, IonGrid, IonRow } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonCol, IonGrid, IonRow },
-  });
 </script>
 
 <style scoped>

From b59188fd10a7794c7201254dbac9c99fc48ee179 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 17:54:49 -0500
Subject: [PATCH 17/58] header

---
 static/usage/v7/header/basic/vue.md                | 7 +------
 static/usage/v7/header/condense/vue.md             | 7 +------
 static/usage/v7/header/custom-scroll-target/vue.md | 7 +------
 static/usage/v7/header/fade/vue.md                 | 7 +------
 static/usage/v7/header/no-border/vue.md            | 7 +------
 static/usage/v7/header/translucent/vue.md          | 7 +------
 6 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/static/usage/v7/header/basic/vue.md b/static/usage/v7/header/basic/vue.md
index 1bba4fdee2b..38642bf55b1 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 lang="ts" setup>
   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..dda020ade07 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 lang="ts" setup>
   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..5a71b3c6dd4 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 lang="ts" setup>
   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..f3a2e3f52cb 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 lang="ts" setup>
   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..0cb3f566fa1 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 lang="ts" setup>
   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..77f6e8ef141 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 lang="ts" setup>
   import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonTitle, IonToolbar },
-  });
 </script>
 ```

From e2216af41088df70b7c2d1692c69157b3387bf02 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 17:57:22 -0500
Subject: [PATCH 18/58] icon

---
 static/usage/v7/icon/basic/vue.md | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/static/usage/v7/icon/basic/vue.md b/static/usage/v7/icon/basic/vue.md
index c78d79fb041..83adf87290f 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 lang="ts" setup>
   import { IonIcon } from '@ionic/vue';
   import { logoIonic } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon },
-    setup() {
-      return { logoIonic };
-    },
-  });
 </script>
 ```

From 0c959ed3addc5e6759bbd9cfc551d75b6405df02 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 17:58:27 -0500
Subject: [PATCH 19/58] img

---
 static/usage/v7/img/basic/vue.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md
index db4d74618ef..a4760b2bbe4 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 lang="ts" setup>
   import { IonImg } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonImg },
-  });
 </script>
 ```

From bc71b762ead4cbb093981159a307893f23ec110e Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 18:03:14 -0500
Subject: [PATCH 20/58] infinite-scroll

---
 static/usage/v7/infinite-scroll/basic/vue.md  | 45 ++++++-------------
 .../custom-infinite-scroll-content/vue.md     | 29 +++---------
 .../infinite-scroll-content/vue.md            | 29 +++---------
 3 files changed, 26 insertions(+), 77 deletions(-)

diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
index dc7a7c45f46..1c40860040a 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 lang="ts" setup>
   import {
     IonContent,
     IonInfiniteScroll,
@@ -27,39 +27,22 @@
     IonLabel,
     InfiniteScrollCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent, reactive } from 'vue';
+  import { reactive } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonContent,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonList,
-      IonItem,
-      IonAvatar,
-      IonImg,
-      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 = (ev: InfiniteScrollCustomEvent) => {
-        generateItems();
-        setTimeout(() => ev.target.complete(), 500);
-      };
+  const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
+    generateItems();
+    setTimeout(() => ev.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 85954295280..a6a1d40bd92 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,7 +81,7 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonContent,
     IonInfiniteScroll,
@@ -93,29 +93,12 @@
     IonLabel,
     InfiniteScrollCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent, reactive } from 'vue';
+  import { reactive } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonContent,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonList,
-      IonItem,
-      IonAvatar,
-      IonImg,
-      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 f00b47e1fb8..e8bc7c0053b 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 lang="ts" setup>
   import {
     IonContent,
     IonInfiniteScroll,
@@ -30,29 +30,12 @@
     IonLabel,
     InfiniteScrollCustomEvent,
   } from '@ionic/vue';
-  import { defineComponent, reactive } from 'vue';
+  import { reactive } from 'vue';
 
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonContent,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonList,
-      IonItem,
-      IonAvatar,
-      IonImg,
-      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>
 ```

From 0e75efe89749bba2f14293d8f245cb0f4cd34da2 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 14 Dec 2023 18:17:58 -0500
Subject: [PATCH 21/58] input

---
 static/usage/v7/input/basic/vue.md            |  7 +--
 static/usage/v7/input/clear/vue.md            |  7 +--
 static/usage/v7/input/fill/vue.md             |  7 +--
 static/usage/v7/input/filtering/vue.md        | 43 ++++++---------
 static/usage/v7/input/helper-error/vue.md     | 55 +++++++++----------
 static/usage/v7/input/label-placement/vue.md  |  7 +--
 static/usage/v7/input/label-slot/vue.md       |  7 +--
 static/usage/v7/input/no-visible-label/vue.md |  7 +--
 static/usage/v7/input/start-end-slots/vue.md  | 16 +-----
 static/usage/v7/input/theming/colors/vue.md   |  7 +--
 .../v7/input/theming/css-properties/vue.md    |  7 +--
 static/usage/v7/input/types/vue.md            |  7 +--
 12 files changed, 53 insertions(+), 124 deletions(-)

diff --git a/static/usage/v7/input/basic/vue.md b/static/usage/v7/input/basic/vue.md
index cfdca09244a..17dd0ef4e00 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 lang="ts" setup>
   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..097fe701b48 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 lang="ts" setup>
   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/fill/vue.md b/static/usage/v7/input/fill/vue.md
index d1f2e440b05..e4f2c1ecd7c 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 lang="ts" setup>
   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 a95e5dcc843..d2b6f0f0019 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 lang="ts" setup>
   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 = (ev) => {
-        const value = ev.target!.value;
+  const ionInputEl = ref();
+  const inputModel = ref('');
+  const onInput = (ev) => {
+    const value = ev.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 ce801d04ac7..221728a8ef0 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 lang="ts" setup>
   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(ev) {
-        const value = ev.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(null);
+
+  function 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])?)*$/
+    );
+  }
+
+  function validate(ev) {
+    const value = ev.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');
+  }
+
+  function 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..3537bf3cbde 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 lang="ts" setup>
   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..d99c6b25f66 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 lang="ts" setup>
   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..d4c6746a75a 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 lang="ts" setup>
   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..bf178ac64bc 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 lang="ts" setup>
   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..4749c965d21 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 lang="ts" setup>
   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..2d50d1df579 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 lang="ts" setup>
   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..16b198ae457 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 lang="ts" setup>
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```

From 11004f4ac366d78a5c3aa59c830bc238dc00eb4d Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:28:14 -0500
Subject: [PATCH 22/58] item

---
 static/usage/v7/item/basic/vue.md             |  7 +-----
 static/usage/v7/item/buttons/vue.md           | 10 +-------
 static/usage/v7/item/clickable/vue.md         |  7 +-----
 .../v7/item/content-types/actions/vue.md      | 23 +------------------
 .../v7/item/content-types/controls/vue.md     | 16 +------------
 .../v7/item/content-types/metadata/vue.md     | 21 +----------------
 .../content-types/supporting-visuals/vue.md   | 16 +------------
 .../usage/v7/item/content-types/text/vue.md   | 19 +--------------
 static/usage/v7/item/detail-arrows/vue.md     | 12 +---------
 static/usage/v7/item/icons/vue.md             | 10 +-------
 static/usage/v7/item/inputs/vue.md            |  7 +-----
 static/usage/v7/item/lines/vue.md             | 10 +-------
 static/usage/v7/item/media/vue.md             |  7 +-----
 static/usage/v7/item/theming/colors/vue.md    |  7 +-----
 .../v7/item/theming/css-properties/vue.md     |  7 +-----
 .../v7/item/theming/css-shadow-parts/vue.md   |  7 +-----
 .../v7/item/theming/input-highlight/vue.md    |  6 +----
 17 files changed, 17 insertions(+), 175 deletions(-)

diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
index c8e25a1819a..608321a0e41 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 lang="ts" setup>
   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..0b7ce00869f 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 lang="ts" setup>
   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..9f7bd18f991 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 lang="ts" setup>
   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..b533b636b45 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 lang="ts" setup>
   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..e97590b2ce2 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 lang="ts" setup>
   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..12f522972eb 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 lang="ts" setup>
   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..7adeaebdbe7 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 lang="ts" setup>
   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..b5c85edbe9b 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 lang="ts" setup>
   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..c2be4777aca 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 lang="ts" setup>
   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/icons/vue.md b/static/usage/v7/item/icons/vue.md
index a89e5e6aad0..f2b61cc324b 100644
--- a/static/usage/v7/item/icons/vue.md
+++ b/static/usage/v7/item/icons/vue.md
@@ -21,16 +21,8 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
   import { informationCircle, star } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonIcon, IonItem, IonLabel },
-    setup() {
-      return { informationCircle, star };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
index 62ce6f5efc1..c7ba5b0a451 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 lang="ts" setup>
   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..0097ab96f3c 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 lang="ts" setup>
   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..b6236edf0f8 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 lang="ts" setup>
   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..b989b73bc00 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 lang="ts" setup>
   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..ea2524248a1 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 lang="ts" setup>
   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..003d3d86d13 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 lang="ts" setup>
   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..a76a6c06fdd 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 lang="ts" setup>
   import { IonInput, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    components: { IonInput, IonItem, IonLabel },
-  });
 </script>
 
 <style>

From 00ca0cb0de0fdc196d69b3afb66aed412daeeb95 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:38:14 -0500
Subject: [PATCH 23/58] item-divider

---
 static/usage/v7/item-divider/basic/vue.md                  | 7 +------
 static/usage/v7/item-divider/theming/colors/vue.md         | 7 +------
 static/usage/v7/item-divider/theming/css-properties/vue.md | 7 +------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md
index 22c9565c278..b855b433bfd 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 lang="ts" setup>
   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..6ec7f5568cf 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 lang="ts" setup>
   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..1fbe0ff634a 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 lang="ts" setup>
   import { IonItemDivider } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider },
-  });
 </script>
 
 <style scoped>

From c0dad4623b7bafbb5d5d107a08166f0ad7b3af6d Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:39:23 -0500
Subject: [PATCH 24/58] item-group

---
 static/usage/v7/item-group/basic/vue.md         | 7 +------
 static/usage/v7/item-group/sliding-items/vue.md | 7 +------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/item-group/basic/vue.md b/static/usage/v7/item-group/basic/vue.md
index edba72f0e69..7ae2ab676fe 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 lang="ts" setup>
   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..c5b9e239535 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 lang="ts" setup>
   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>
 ```

From 7cb8ef8b38459079b0cff2a0d3c0b26617bff89a Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:42:43 -0500
Subject: [PATCH 25/58] label

---
 static/usage/v7/label/basic/vue.md          | 7 +------
 static/usage/v7/label/input/vue.md          | 6 +-----
 static/usage/v7/label/item/vue.md           | 7 +------
 static/usage/v7/label/theming/colors/vue.md | 7 +------
 4 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/static/usage/v7/label/basic/vue.md b/static/usage/v7/label/basic/vue.md
index 87f46b68110..cde7c134310 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 lang="ts" setup>
   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..3f33390b65a 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 lang="ts" setup>
   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 fe4cd48904a..ad431420dbe 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 lang="ts" setup>
   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..f917013b789 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 lang="ts" setup>
   import { IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel },
-  });
 </script>
 ```

From 78d5eec61f98f27641762381f107ea3266352777 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:45:44 -0500
Subject: [PATCH 26/58] list

---
 .../v7/layout/dynamic-font-scaling/vue.md     | 26 +------------------
 static/usage/v7/list/basic/vue.md             |  7 +----
 static/usage/v7/list/inset/vue.md             |  7 +----
 static/usage/v7/list/lines/vue.md             |  7 +----
 4 files changed, 4 insertions(+), 43 deletions(-)

diff --git a/static/usage/v7/layout/dynamic-font-scaling/vue.md b/static/usage/v7/layout/dynamic-font-scaling/vue.md
index 5e0f13156c6..15a7c0de7a3 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 lang="ts" setup>
   import {
     IonBackButton,
     IonButton,
@@ -64,30 +64,6 @@
     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>
diff --git a/static/usage/v7/list/basic/vue.md b/static/usage/v7/list/basic/vue.md
index 4f3886c0719..42d6ec6e270 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 lang="ts" setup>
   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..4f75add243e 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 lang="ts" setup>
   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..c43242456f9 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 lang="ts" setup>
   import { IonItem, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonLabel, IonList },
-  });
 </script>
 ```

From 980f6c5bd44fbea1a3f74378fda78cf51228a504 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:50:37 -0500
Subject: [PATCH 27/58] list-header

---
 static/usage/v7/list-header/basic/vue.md                  | 7 +------
 static/usage/v7/list-header/buttons/vue.md                | 7 +------
 static/usage/v7/list-header/lines/vue.md                  | 7 +------
 static/usage/v7/list-header/theming/colors/vue.md         | 7 +------
 static/usage/v7/list-header/theming/css-properties/vue.md | 7 +------
 5 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/static/usage/v7/list-header/basic/vue.md b/static/usage/v7/list-header/basic/vue.md
index b7d6980e400..73188378d2d 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 lang="ts" setup>
   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..23a1881bedd 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 lang="ts" setup>
   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..2a0b957a982 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 lang="ts" setup>
   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..78a1e07f465 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 lang="ts" setup>
   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..7178f04d73f 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 lang="ts" setup>
   import { IonLabel, IonListHeader } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonListHeader },
-  });
 </script>
 
 <style scoped>

From f630b75f42e201041cc2bc344cb099c036065dc0 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:52:39 -0500
Subject: [PATCH 28/58] loading

---
 static/usage/v7/loading/controller/vue.md | 24 ++++++++---------------
 static/usage/v7/loading/inline/vue.md     |  6 +-----
 static/usage/v7/loading/spinners/vue.md   |  7 +------
 static/usage/v7/loading/theming/vue.md    |  7 +------
 4 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md
index e80b61cc8b3..f9159e5634e 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 lang="ts" setup>
   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..c71803c3f23 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 lang="ts" setup>
   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..1f61e4d23e0 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 lang="ts" setup>
   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..9f6139d0068 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 lang="ts" setup>
   import { IonButton, IonLoading } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonLoading },
-  });
 </script>
 <style>
   ion-loading.custom-loading {

From ab31953af328e274de24ce396ade1cc3d1ff9811 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 09:58:06 -0500
Subject: [PATCH 29/58] menu

---
 static/usage/v7/menu/basic/vue.md    | 16 +-------
 static/usage/v7/menu/multiple/vue.md | 58 ++++++++++++----------------
 static/usage/v7/menu/sides/vue.md    | 16 +-------
 static/usage/v7/menu/theming/vue.md  | 16 +-------
 static/usage/v7/menu/toggle/vue.md   | 16 +-------
 static/usage/v7/menu/type/vue.md     | 25 ++----------
 6 files changed, 32 insertions(+), 115 deletions(-)

diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md
index 531c50678f8..8060e3eda78 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 lang="ts" setup>
   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..b344ea8e99f 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 lang="ts" setup>
   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..c4e51a9ce28 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 lang="ts" setup>
   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..8ca6bf2ca52 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 lang="ts" setup>
   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..d15b294086f 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 lang="ts" setup>
   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..0c2ffb23b0c 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 lang="ts" setup>
   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>
 ```

From 037efca8d6c6efce4fabd4b3c439d95b67588e10 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 10:05:52 -0500
Subject: [PATCH 30/58] nav: nav-link

---
 .../usage/v7/nav/nav-link/vue/example_vue.md  | 11 ++--------
 .../usage/v7/nav/nav-link/vue/page_one_vue.md | 11 ++--------
 .../v7/nav/nav-link/vue/page_three_vue.md     |  6 +-----
 .../usage/v7/nav/nav-link/vue/page_two_vue.md | 20 ++-----------------
 4 files changed, 7 insertions(+), 41 deletions(-)

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..8b347ffd9a2 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 lang="ts" setup>
   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..b3070c9f9ee 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 lang="ts" setup>
   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..a3ebebcafba 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 lang="ts" setup>
   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..0090c90c82c 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 lang="ts" setup>
   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>
 ```

From ae5b1613e6091520971e1d63c8764a29b71c403d Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 10:08:34 -0500
Subject: [PATCH 31/58] note

---
 static/usage/v7/note/basic/vue.md                  | 7 +------
 static/usage/v7/note/item/vue.md                   | 7 +------
 static/usage/v7/note/theming/colors/vue.md         | 7 +------
 static/usage/v7/note/theming/css-properties/vue.md | 7 +------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/static/usage/v7/note/basic/vue.md b/static/usage/v7/note/basic/vue.md
index dffb1348fc9..7f10ecb0b81 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 lang="ts" setup>
   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..d0420f38eea 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 lang="ts" setup>
   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..a7022d75382 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 lang="ts" setup>
   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..d152e7532ea 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 lang="ts" setup>
   import { IonNote } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonNote },
-  });
 </script>
 
 <style>

From e5518463f555747101b93385f8688082eb635482 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 10:16:08 -0500
Subject: [PATCH 32/58] picker

---
 static/usage/v7/picker/controller/vue.md      |  79 +++++-------
 static/usage/v7/picker/inline/isOpen/vue.md   |  77 ++++++------
 static/usage/v7/picker/inline/trigger/vue.md  |  66 +++++-----
 static/usage/v7/picker/multiple-column/vue.md | 118 ++++++++----------
 4 files changed, 153 insertions(+), 187 deletions(-)

diff --git a/static/usage/v7/picker/controller/vue.md b/static/usage/v7/picker/controller/vue.md
index 54fedf2cce3..c3475978640 100644
--- a/static/usage/v7/picker/controller/vue.md
+++ b/static/usage/v7/picker/controller/vue.md
@@ -3,59 +3,48 @@
   <ion-button @click="openPicker()">Open</ion-button>
 </template>
 
-<script>
+<script lang="ts" setup>
   import { IonButton, pickerController } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonButton },
-    data() {
-      return {
-        message: '',
-      };
-    },
-    methods: {
-      async openPicker() {
-        const picker = await pickerController.create({
-          columns: [
+  async function openPicker() {
+    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..37e93ebbbdd 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 lang="ts" setup>
   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..432caab56a2 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 lang="ts" setup>
   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..8a61edc915c 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 lang="ts" setup>
   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>
 ```

From 311bf823c2f67cd996b820aa8e860a59f5a67d8d Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 10:21:08 -0500
Subject: [PATCH 33/58] popover

---
 .../popover/customization/positioning/vue.md  |  7 +----
 .../v7/popover/customization/sizing/vue.md    |  7 +----
 .../v7/popover/customization/styling/vue.md   |  7 +----
 static/usage/v7/popover/nested/vue.md         |  7 +----
 .../usage/v7/popover/performance/mount/vue.md |  7 +----
 .../presenting/controller/vue/example_vue.md  | 25 +++++++-----------
 .../presenting/controller/vue/popover_vue.md  |  8 +-----
 .../popover/presenting/inline-isopen/vue.md   | 26 +++++++------------
 .../popover/presenting/inline-trigger/vue.md  |  7 +----
 9 files changed, 26 insertions(+), 75 deletions(-)

diff --git a/static/usage/v7/popover/customization/positioning/vue.md b/static/usage/v7/popover/customization/positioning/vue.md
index b658de342a4..4172d81a4f1 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 lang="ts" setup>
   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..ed79f40e225 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 lang="ts" setup>
   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..31650e9cca3 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 lang="ts" setup>
   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..8e505d426b9 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 lang="ts" setup>
   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..658a3e0f0b3 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 lang="ts" setup>
   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 c477a870895..29e8d6eac14 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 lang="ts" setup>
   import { IonButton, popoverController } from '@ionic/vue';
   import Popover from './Popover.vue';
 
-  export default {
-    components: { IonButton },
-    methods: {
-      async openPopover(ev: Event) {
-        const popover = await popoverController.create({
-          component: Popover,
-          event: ev,
-        });
-        await popover.present();
+  async function openPopover(ev: Event) {
+    const popover = await popoverController.create({
+      component: Popover,
+      event: ev,
+    });
+    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..f7c82b2059e 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 lang="ts" setup>
   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..ea1b27e17ce 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 lang="ts" setup>
   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);
+
+  function openPopover(e: Event) {
+    this.event = e;
+    this.popoverOpen = 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..1ec10133f02 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 lang="ts" setup>
   import { IonButton, IonContent, IonPopover } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton, IonContent, IonPopover },
-  });
 </script>
 ```

From 72bc39c554acf06ae5d851657973eb5015dc8774 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 10:31:00 -0500
Subject: [PATCH 34/58] radio

---
 static/usage/v7/radio/alignment/vue.md        |  7 +--
 static/usage/v7/radio/basic/vue.md            |  7 +--
 static/usage/v7/radio/empty-selection/vue.md  |  7 +--
 static/usage/v7/radio/justify/vue.md          |  7 +--
 static/usage/v7/radio/label-placement/vue.md  |  7 +--
 static/usage/v7/radio/theming/colors/vue.md   |  7 +--
 .../v7/radio/theming/css-properties/vue.md    |  7 +--
 .../v7/radio/theming/css-shadow-parts/vue.md  |  7 +--
 .../usage/v7/radio/using-comparewith/vue.md   | 59 ++++++++-----------
 9 files changed, 31 insertions(+), 84 deletions(-)

diff --git a/static/usage/v7/radio/alignment/vue.md b/static/usage/v7/radio/alignment/vue.md
index 0f208b37a2a..49eccae2aea 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 lang="ts" setup>
   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..c8bc0ad5f0a 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 lang="ts" setup>
   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..d73862509c8 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 lang="ts" setup>
   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..2279eb303ed 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 lang="ts" setup>
   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..7dcc325364c 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 lang="ts" setup>
   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/colors/vue.md b/static/usage/v7/radio/theming/colors/vue.md
index 74b8aa3a73e..e95736679bf 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 lang="ts" setup>
   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..713e69e4ccd 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 lang="ts" setup>
   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..208b3b62de8 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 lang="ts" setup>
   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 28518284654..9d69f446ead 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 lang="ts" setup>
   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(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
-      },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
     },
-  });
+  ];
+
+  function compareWith(o1, o2) {
+    return o1.id === o2.id;
+  }
+
+  function handleChange(ev) {
+    console.log('Current value:', JSON.stringify(ev.detail.value));
+  }
 </script>
 ```

From ca8646a9cc31ad692bc7cb2d95d14dabb2afd502 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 11:53:38 -0500
Subject: [PATCH 35/58] range

---
 static/usage/v7/range/basic/vue.md            |  7 +------
 static/usage/v7/range/dual-knobs/vue.md       |  7 +------
 static/usage/v7/range/ion-change-event/vue.md | 14 ++++---------
 .../usage/v7/range/ion-knob-move-event/vue.md | 21 +++++++------------
 static/usage/v7/range/label-slot/vue.md       |  7 +------
 static/usage/v7/range/labels/vue.md           |  7 +------
 static/usage/v7/range/no-visible-label/vue.md |  7 +------
 static/usage/v7/range/pins/vue.md             | 12 ++---------
 static/usage/v7/range/slots/vue.md            | 13 +-----------
 static/usage/v7/range/snapping-ticks/vue.md   |  7 +------
 .../v7/range/theming/css-properties/vue.md    |  7 +------
 .../v7/range/theming/css-shadow-parts/vue.md  |  7 +------
 12 files changed, 23 insertions(+), 93 deletions(-)

diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
index 421bea060e4..6d47c620db1 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 lang="ts" setup>
   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..41502079934 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 lang="ts" setup>
   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..3796c636fe8 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 lang="ts" setup>
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonRange },
-    methods: {
-      onIonChange({ detail }) {
-        console.log('ionChange emitted value: ' + detail.value);
-      },
-    },
-  });
+  function 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..7068861be7b 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 lang="ts" setup>
   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);
-      },
-    },
-  });
+  function onIonKnobMoveStart({ detail }) {
+    console.log('ionKnobMoveStart:', detail.value);
+  }
+
+  function 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..3f8fd42e305 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 lang="ts" setup>
   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..52a964af799 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 lang="ts" setup>
   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..6d47c620db1 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 lang="ts" setup>
   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..19bff14597a 100644
--- a/static/usage/v7/range/pins/vue.md
+++ b/static/usage/v7/range/pins/vue.md
@@ -3,17 +3,9 @@
   <ion-range aria-label="Range with pin" :pin="true" :pin-formatter="pinFormatter"></ion-range>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonRange },
-    setup() {
-      return {
-        pinFormatter: (value: number) => `${value}%`,
-      };
-    },
-  });
+  const 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..09a46bdec7f 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 lang="ts" setup>
   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..a7541119951 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 lang="ts" setup>
   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..20ec33f89ce 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 lang="ts" setup>
   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..e761f6ae216 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 lang="ts" setup>
   import { IonRange } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRange },
-  });
 </script>
 ```

From b817e5d5fabae5d2bb3cda71ef193c6263632253 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:00:03 -0500
Subject: [PATCH 36/58] refresher

---
 static/usage/v7/refresher/advanced/vue.md     | 84 ++++++++-----------
 static/usage/v7/refresher/basic/vue.md        | 22 ++---
 .../usage/v7/refresher/custom-content/vue.md  | 22 ++---
 .../v7/refresher/custom-scroll-target/vue.md  | 22 ++---
 .../usage/v7/refresher/pull-properties/vue.md | 22 ++---
 5 files changed, 61 insertions(+), 111 deletions(-)

diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
index c5ec3047d44..184b4c04db8 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 lang="ts" setup>
   import {
     IonContent,
     IonHeader,
@@ -36,62 +36,44 @@
     IonTitle,
     IonToolbar,
   } 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,
-    },
-    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',
+  ];
+  let 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: CustomEvent) => {
-        setTimeout(() => {
-          addItems(3, true);
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { ellipse, handleRefresh, items, names };
-    },
-  });
+  const handleRefresh = (event: CustomEvent) => {
+    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 870081dcfbf..dd20ef762f3 100644
--- a/static/usage/v7/refresher/basic/vue.md
+++ b/static/usage/v7/refresher/basic/vue.md
@@ -15,22 +15,14 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: CustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { handleRefresh };
-    },
-  });
+  const handleRefresh = (event: CustomEvent) => {
+    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 af350137449..af5381eeec9 100644
--- a/static/usage/v7/refresher/custom-content/vue.md
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -21,23 +21,15 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { chevronDownCircleOutline } from 'ionicons/icons';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: CustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { chevronDownCircleOutline, handleRefresh };
-    },
-  });
+  const handleRefresh = (event: CustomEvent) => {
+    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 b63d979c827..3527d387bd4 100644
--- a/static/usage/v7/refresher/custom-scroll-target/vue.md
+++ b/static/usage/v7/refresher/custom-scroll-target/vue.md
@@ -17,23 +17,15 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: CustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { handleRefresh };
-    },
-  });
+  const handleRefresh = (event: CustomEvent) => {
+    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 0d3e1b45e9f..ed2be98d349 100644
--- a/static/usage/v7/refresher/pull-properties/vue.md
+++ b/static/usage/v7/refresher/pull-properties/vue.md
@@ -15,22 +15,14 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
-    setup() {
-      const handleRefresh = (event: CustomEvent) => {
-        setTimeout(() => {
-          // Any calls to load data go here
-          event.target.complete();
-        }, 2000);
-      };
-
-      return { handleRefresh };
-    },
-  });
+  const handleRefresh = (event: CustomEvent) => {
+    setTimeout(() => {
+      // Any calls to load data go here
+      event.target.complete();
+    }, 2000);
+  };
 </script>
 ```

From d60f4942a985e5bf4e4267584e0471a2d21e73db Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:07:54 -0500
Subject: [PATCH 37/58] reorder

---
 static/usage/v7/reorder/basic/vue.md          | 28 +++++---------
 static/usage/v7/reorder/custom-icon/vue.md    | 27 +++++---------
 .../v7/reorder/custom-scroll-target/vue.md    | 28 +++++---------
 .../usage/v7/reorder/toggling-disabled/vue.md | 37 ++++++++-----------
 static/usage/v7/reorder/updating-data/vue.md  | 32 +++++++---------
 static/usage/v7/reorder/wrapper/vue.md        | 28 +++++---------
 6 files changed, 68 insertions(+), 112 deletions(-)

diff --git a/static/usage/v7/reorder/basic/vue.md b/static/usage/v7/reorder/basic/vue.md
index 0ac2374089f..45ef35b13ee 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">
+<script lang="ts" setup>
   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);
+  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 };
-    },
-  });
+    // 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..761022ac673 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">
+<script lang="ts" setup>
   import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent } from '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: 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, 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..d6aa219b264 100644
--- a/static/usage/v7/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v7/reorder/custom-scroll-target/vue.md
@@ -35,27 +35,19 @@
   </ion-content>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent } from '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: 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 };
-    },
-  });
+    // 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..7c68c5439ac 100644
--- a/static/usage/v7/reorder/toggling-disabled/vue.md
+++ b/static/usage/v7/reorder/toggling-disabled/vue.md
@@ -33,32 +33,25 @@
   <ion-button @click="toggleReorder()"> Toggle Reorder </ion-button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
-  import { defineComponent, ref } from '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: 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();
-      };
+    // 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..33b1cea9897 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">
+<script lang="ts" setup>
   import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
   import { defineComponent, 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: CustomEvent) => {
+    // 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..a3a332ad0af 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">
+<script lang="ts" setup>
   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);
+  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 };
-    },
-  });
+    // 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>
 ```

From 385f4b586b0374c12755b415f067196a5e5b26cc Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:10:10 -0500
Subject: [PATCH 38/58] ripple-effect

---
 static/usage/v7/ripple-effect/basic/vue.md       | 7 +------
 static/usage/v7/ripple-effect/customizing/vue.md | 7 +------
 static/usage/v7/ripple-effect/type/vue.md        | 7 +------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/static/usage/v7/ripple-effect/basic/vue.md b/static/usage/v7/ripple-effect/basic/vue.md
index e5270056c0c..a08a3a3445b 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 lang="ts" setup>
   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..54b7b76a573 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 lang="ts" setup>
   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..32d69af86e2 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 lang="ts" setup>
   import { IonRippleEffect } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonRippleEffect },
-  });
 </script>
 
 <style scoped>

From 2b911175a5e89950e94176bd6ac515229cc2edcf Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:17:51 -0500
Subject: [PATCH 39/58] searchbar

---
 static/usage/v7/searchbar/basic/vue.md        |  7 +--
 .../usage/v7/searchbar/cancel-button/vue.md   | 10 +---
 static/usage/v7/searchbar/clear-button/vue.md | 10 +---
 static/usage/v7/searchbar/debounce/vue.md     | 46 ++++++++-----------
 static/usage/v7/searchbar/search-icon/vue.md  | 10 +---
 .../usage/v7/searchbar/theming/colors/vue.md  |  7 +--
 .../searchbar/theming/css-properties/vue.md   |  7 +--
 7 files changed, 25 insertions(+), 72 deletions(-)

diff --git a/static/usage/v7/searchbar/basic/vue.md b/static/usage/v7/searchbar/basic/vue.md
index f50a9cb5a5f..ecf7ef4f252 100644
--- a/static/usage/v7/searchbar/basic/vue.md
+++ b/static/usage/v7/searchbar/basic/vue.md
@@ -7,12 +7,7 @@
   <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/cancel-button/vue.md b/static/usage/v7/searchbar/cancel-button/vue.md
index d3f85859011..437d028e611 100644
--- a/static/usage/v7/searchbar/cancel-button/vue.md
+++ b/static/usage/v7/searchbar/cancel-button/vue.md
@@ -11,16 +11,8 @@
   ></ion-searchbar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { trash } from 'ionicons/icons';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-    setup() {
-      return { trash };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v7/searchbar/clear-button/vue.md b/static/usage/v7/searchbar/clear-button/vue.md
index 3b5a9e53c7f..d058912f1e7 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 lang="ts" setup>
   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..68f6ba957ce 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 lang="ts" setup>
   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);
-      },
-    },
-  });
+  function handleInput(event) {
+    const query = event.target.value.toLowerCase();
+    this.results = this.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..7abc767bcd6 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 lang="ts" setup>
   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..7bb1395690a 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 lang="ts" setup>
   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..a13fe21f00f 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 lang="ts" setup>
   import { IonSearchbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSearchbar },
-  });
 </script>
 
 <style scoped>

From df2e759474d78a1d09170c088fbd616feb0e672c Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:27:14 -0500
Subject: [PATCH 40/58] segment

---
 static/usage/v7/segment/basic/vue.md          |  7 +------
 static/usage/v7/segment/scrollable/vue.md     | 21 +------------------
 static/usage/v7/segment/theming/colors/vue.md |  7 +------
 .../v7/segment/theming/css-properties/vue.md  |  7 +------
 4 files changed, 4 insertions(+), 38 deletions(-)

diff --git a/static/usage/v7/segment/basic/vue.md b/static/usage/v7/segment/basic/vue.md
index 7252ce56f2f..d02ed07f227 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 lang="ts" setup>
   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..7f5e08e03ff 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 lang="ts" setup>
   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..fd899562b67 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 lang="ts" setup>
   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..42ea2dd79e7 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 lang="ts" setup>
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 
 <style>

From d45f6ae6ef5f8443f31eb2c177659a4b0dd892ca Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:32:01 -0500
Subject: [PATCH 41/58] segment-button

---
 static/usage/v7/segment-button/basic/vue.md            |  7 +------
 static/usage/v7/segment-button/layout/vue.md           | 10 +---------
 .../v7/segment-button/theming/css-properties/vue.md    |  7 +------
 .../v7/segment-button/theming/css-shadow-parts/vue.md  |  7 +------
 4 files changed, 4 insertions(+), 27 deletions(-)

diff --git a/static/usage/v7/segment-button/basic/vue.md b/static/usage/v7/segment-button/basic/vue.md
index 79fd032d7ca..134d8852e41 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 lang="ts" setup>
   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..c0301538ef5 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 lang="ts" setup>
   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..2eae2fc35f9 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 lang="ts" setup>
   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..8495ae71b4a 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 lang="ts" setup>
   import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonLabel, IonSegment, IonSegmentButton },
-  });
 </script>
 
 <style>

From c37baabecc8029d52c9d1eb512155b0278c582e5 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 12:46:06 -0500
Subject: [PATCH 42/58] select

---
 .../v7/select/basic/multiple-selection/vue.md |  7 +-
 .../basic/responding-to-interaction/vue.md    | 26 +++----
 .../v7/select/basic/single-selection/vue.md   |  7 +-
 .../select/customization/button-text/vue.md   |  7 +-
 .../customization/custom-toggle-icons/vue.md  | 10 +--
 .../customization/icon-flip-behavior/vue.md   | 10 +--
 .../customization/interface-options/vue.md    | 44 +++++-------
 .../customization/styling-select/vue.md       |  7 +-
 static/usage/v7/select/fill/vue.md            |  7 +-
 .../v7/select/interfaces/action-sheet/vue.md  |  7 +-
 .../usage/v7/select/interfaces/popover/vue.md |  7 +-
 static/usage/v7/select/justify/vue.md         |  7 +-
 static/usage/v7/select/label-placement/vue.md |  7 +-
 static/usage/v7/select/label-slot/vue.md      |  7 +-
 .../usage/v7/select/no-visible-label/vue.md   |  7 +-
 .../multiple-selection/vue.md                 | 70 ++++++++-----------
 .../using-comparewith/vue.md                  | 56 +++++++--------
 static/usage/v7/select/start-end-slots/vue.md | 17 +----
 18 files changed, 94 insertions(+), 216 deletions(-)

diff --git a/static/usage/v7/select/basic/multiple-selection/vue.md b/static/usage/v7/select/basic/multiple-selection/vue.md
index 3287578bddc..32d9f08ca10 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 lang="ts" setup>
   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 a12b3238c60..cb79191698e 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,17 @@
   </ion-list>
 </template>
 
-<script>
+<script lang="ts" setup>
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonItem, IonList, IonSelect, IonSelectOption },
-    methods: {
-      handleChange(ev) {
-        console.log('ionChange fired with value: ' + ev.detail.value);
-      },
-      handleCancel() {
-        console.log('ionCancel fired');
-      },
-      handleDismiss() {
-        console.log('ionDismiss fired');
-      },
-    },
-  });
+  function handleChange(ev) {
+    console.log('ionChange fired with value: ' + ev.detail.value);
+  }
+  function handleCancel() {
+    console.log('ionCancel fired');
+  }
+  function 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..c9bd0b5de88 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 lang="ts" setup>
   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..a8c48092b8e 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 lang="ts" setup>
   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..f9c1dc786a1 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 lang="ts" setup>
   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..0ca8fba57e8 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 lang="ts" setup>
   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..0a05479b7bd 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 lang="ts" setup>
   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..71be813349a 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 lang="ts" setup>
   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..3d8bf597b40 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 lang="ts" setup>
   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..dc29744ffa6 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 lang="ts" setup>
   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..62039b223e7 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 lang="ts" setup>
   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..54c922b3848 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 lang="ts" setup>
   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..b86aab8ad4f 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 lang="ts" setup>
   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..80190640dce 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 lang="ts" setup>
   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..38d8a88a6d7 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 lang="ts" setup>
   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 cf095fd89c0..caa09f82758 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,39 @@
   </ion-list>
 </template>
 
-<script>
+<script lang="ts" setup>
   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',
+    },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
     },
-    methods: {
-      compareWith(o1, o2) {
-        if (!o1 || !o2) {
-          return o1 === o2;
-        }
+  ];
 
-        if (Array.isArray(o2)) {
-          return o2.some((o) => o.id === o1.id);
-        }
+  function compareWith(o1, o2) {
+    if (!o1 || !o2) {
+      return o1 === o2;
+    }
 
-        return o1.id === o2.id;
-      },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
-      },
-    },
-  });
+    if (Array.isArray(o2)) {
+      return o2.some((o) => o.id === o1.id);
+    }
+
+    return o1.id === o2.id;
+  }
+  function handleChange(ev) {
+    console.log('Current value:', JSON.stringify(ev.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 e93b223f6a1..3c9816bfa48 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 lang="ts" setup>
   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(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
-      },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
     },
-  });
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  function compareWith(o1, o2) {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  }
+
+  function handleChange(ev) {
+    console.log('Current value:', JSON.stringify(ev.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..a18a967f2a8 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 lang="ts" setup>
   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>
 ```

From 585691c7c5a9936c074f4e2c47bc1b951ede9e94 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:12:22 -0500
Subject: [PATCH 43/58] skeleton-text

---
 static/usage/v7/skeleton-text/basic/vue.md    | 27 +++----------------
 .../theming/css-properties/vue.md             | 14 +---------
 2 files changed, 5 insertions(+), 36 deletions(-)

diff --git a/static/usage/v7/skeleton-text/basic/vue.md b/static/usage/v7/skeleton-text/basic/vue.md
index f391050a009..48cc906ce9c 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 lang="ts" setup>
   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..3f6218f9863 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 lang="ts" setup>
   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>

From 73d1a51f8ad7bfc024f20d2e0aa0f46567c7ba0f Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:14:43 -0500
Subject: [PATCH 44/58] spinner

---
 static/usage/v7/spinner/basic/vue.md                  | 7 +------
 static/usage/v7/spinner/theming/colors/vue.md         | 7 +------
 static/usage/v7/spinner/theming/css-properties/vue.md | 7 +------
 static/usage/v7/spinner/theming/resizing/vue.md       | 7 +------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/static/usage/v7/spinner/basic/vue.md b/static/usage/v7/spinner/basic/vue.md
index 089b9fb6da8..805f461eb53 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 lang="ts" setup>
   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..aef5a84d9f0 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 lang="ts" setup>
   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..d8066bfa9b2 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 lang="ts" setup>
   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..07605877261 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 lang="ts" setup>
   import { IonSpinner } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonSpinner },
-  });
 </script>
 
 <style scoped>

From b20a8a70a0f9cedffc02874bf7759c3f7044c158 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:19:00 -0500
Subject: [PATCH 45/58] split-pane

---
 static/usage/v7/split-pane/basic/vue.md                  | 7 +------
 static/usage/v7/split-pane/theming/css-properties/vue.md | 7 +------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/split-pane/basic/vue.md b/static/usage/v7/split-pane/basic/vue.md
index 81f9dbd9a6b..f5f7e7df183 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 lang="ts" setup>
   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..66ed54802c3 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 lang="ts" setup>
   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>

From 369506e6c5d47ffc1024f91d9d7aba6011e34728 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:21:14 -0500
Subject: [PATCH 46/58] tabs

---
 static/usage/v7/tabs/router/vue/app_vue.md         |  9 +--------
 static/usage/v7/tabs/router/vue/example_vue.md     | 14 +-------------
 static/usage/v7/tabs/router/vue/home_page_vue.md   |  6 +-----
 .../usage/v7/tabs/router/vue/library_page_vue.md   |  6 +-----
 static/usage/v7/tabs/router/vue/radio_page_vue.md  |  6 +-----
 static/usage/v7/tabs/router/vue/search_page_vue.md |  6 +-----
 6 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/static/usage/v7/tabs/router/vue/app_vue.md b/static/usage/v7/tabs/router/vue/app_vue.md
index b5f330406db..2180e7e709b 100644
--- a/static/usage/v7/tabs/router/vue/app_vue.md
+++ b/static/usage/v7/tabs/router/vue/app_vue.md
@@ -5,16 +5,9 @@
   </ion-app>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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..7dc147305fa 100644
--- a/static/usage/v7/tabs/router/vue/example_vue.md
+++ b/static/usage/v7/tabs/router/vue/example_vue.md
@@ -28,21 +28,9 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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..64ec093af18 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 lang="ts" setup>
   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..805f4d4c539 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 lang="ts" setup>
   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..3da40c02abf 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 lang="ts" setup>
   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..fd4a6892ea2 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 lang="ts" setup>
   import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
-
-  export default {
-    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
-  };
 </script>
 ```

From 6ccfaad1abb60637a50adda1b6be61c41c705fa5 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:22:21 -0500
Subject: [PATCH 47/58] text

---
 static/usage/v7/text/basic/vue.md | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/static/usage/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md
index b34cd3d437a..709a858ac9b 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 lang="ts" setup>
   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>
 ```

From 27b4b128bbe9eae50bb539255dbcf9f1d42c56f8 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:31:11 -0500
Subject: [PATCH 48/58] textarea

---
 static/usage/v7/textarea/autogrow/vue.md      |  7 +--
 static/usage/v7/textarea/basic/vue.md         |  7 +--
 static/usage/v7/textarea/clear-on-edit/vue.md |  7 +--
 static/usage/v7/textarea/counter/vue.md       | 14 ++---
 static/usage/v7/textarea/fill/vue.md          |  7 +--
 static/usage/v7/textarea/helper-error/vue.md  | 55 +++++++++----------
 .../usage/v7/textarea/label-placement/vue.md  |  7 +--
 static/usage/v7/textarea/label-slot/vue.md    |  7 +--
 .../usage/v7/textarea/no-visible-label/vue.md |  7 +--
 .../usage/v7/textarea/start-end-slots/vue.md  | 18 ++----
 static/usage/v7/textarea/theming/vue.md       |  7 +--
 11 files changed, 41 insertions(+), 102 deletions(-)

diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md
index 693814464e8..f960773ed92 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 lang="ts" setup>
   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..7cef259e0ef 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 lang="ts" setup>
   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..9328ca1960b 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 lang="ts" setup>
   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..5a97b3ee034 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 lang="ts" setup>
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
 
-  export default defineComponent({
-    components: { IonTextarea },
-    methods: {
-      customFormatter(inputLength, maxLength) {
-        return `${maxLength - inputLength} characters remaining`;
-      },
-    },
-  });
+  function 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..426a7efee31 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 lang="ts" setup>
   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 f0fe51ebee8..bf007dc53df 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 lang="ts" setup>
   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(ev) {
-        const value = ev.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();
+
+  function 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])?)*$/
+    );
+  }
+
+  function validate(ev) {
+    const value = ev.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');
+  }
+
+  function 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..001a8aa8575 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 lang="ts" setup>
   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..3f0bc23e523 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 lang="ts" setup>
   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..9ab4696c17e 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 lang="ts" setup>
   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..378e2da6a14 100644
--- a/static/usage/v7/textarea/start-end-slots/vue.md
+++ b/static/usage/v7/textarea/start-end-slots/vue.md
@@ -12,22 +12,12 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   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 };
-    },
-  });
+  function 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..3335f00516a 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 lang="ts" setup>
   import { IonTextarea } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTextarea },
-  });
 </script>
 ```

From d2f334acc94508464c06458207434e762de4cab5 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:32:02 -0500
Subject: [PATCH 49/58] thumbnail

---
 static/usage/v7/thumbnail/basic/vue.md                  | 7 +------
 static/usage/v7/thumbnail/item/vue.md                   | 7 +------
 static/usage/v7/thumbnail/theming/css-properties/vue.md | 7 +------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/static/usage/v7/thumbnail/basic/vue.md b/static/usage/v7/thumbnail/basic/vue.md
index 74afde558d4..9a6161cca22 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 lang="ts" setup>
   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..386570004ee 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 lang="ts" setup>
   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..3c10cbfacea 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 lang="ts" setup>
   import { IonThumbnail } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonThumbnail },
-  });
 </script>
 ```

From 9f74da6aaca9dabbf524967589a1d8494dfe0864 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:32:59 -0500
Subject: [PATCH 50/58] title

---
 static/usage/v7/title/basic/vue.md                         | 7 +------
 static/usage/v7/title/collapsible-large-title/basic/vue.md | 7 +------
 .../usage/v7/title/collapsible-large-title/buttons/vue.md  | 7 +------
 static/usage/v7/title/theming/css-properties/vue.md        | 7 +------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/static/usage/v7/title/basic/vue.md b/static/usage/v7/title/basic/vue.md
index 99a7ee20224..fe7a30a3cec 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 lang="ts" setup>
   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..7a3b87c36d3 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 lang="ts" setup>
   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..a0d0962e885 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 lang="ts" setup>
   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..8fc9ad166e6 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 lang="ts" setup>
   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>
 ```

From 0dcb673e5b1bd3db8b71c39f3526a35b8a6d6484 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:41:39 -0500
Subject: [PATCH 51/58] toast

---
 docs/api/toast.md                             |  2 +-
 static/usage/v7/toast/buttons/vue.md          | 57 ++++++++-----------
 static/usage/v7/toast/icon/vue.md             | 11 +---
 static/usage/v7/toast/inline/basic/vue.md     | 14 +----
 static/usage/v7/toast/inline/is-open/vue.md   | 19 ++-----
 static/usage/v7/toast/layout/vue.md           | 20 ++-----
 static/usage/v7/toast/position-anchor/vue.md  | 15 +----
 .../v7/toast/presenting/controller/vue.md     | 23 +++-----
 static/usage/v7/toast/theming/vue.md          | 19 ++-----
 9 files changed, 55 insertions(+), 125 deletions(-)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 6e49ee25bdc..13f39807ad6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -79,7 +79,7 @@ Toasts can be swiped to dismiss by using the `swipeGesture` property. This featu
 import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
 
 <SwipeGesture />
-  
+
 ## Layout
 
 Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
index fc05a785e17..943fb7ad5a4 100644
--- a/static/usage/v7/toast/buttons/vue.md
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -10,41 +10,32 @@
   ></ion-toast>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonButton, IonToast } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { 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 = (ev: CustomEvent) => {
-        const { role } = ev.detail;
-        console.log(`Dismissed with role: ${role}`);
-      };
-
-      return {
-        toastButtons,
-        handleDismiss,
-      };
+  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 = (ev: CustomEvent) => {
+    const { role } = ev.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..b7b4fd9a89e 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 lang="ts" setup>
   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..01c817df1d3 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 lang="ts" setup>
   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..b396ad9289b 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 lang="ts" setup>
   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..5046d9d7cc7 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 lang="ts" setup>
   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..2ecd9f3f38e 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 lang="ts" setup>
   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..0cecb7af1e2 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 lang="ts" setup>
   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,
-        });
+  async function presentToast(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..06565c8cf2e 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 lang="ts" setup>
   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>

From cfcc61caffa6acd6fe5b786d96395e3375771e87 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:43:16 -0500
Subject: [PATCH 52/58] toggle

---
 static/usage/v7/toggle/alignment/vue.md                | 9 +--------
 static/usage/v7/toggle/basic/vue.md                    | 7 +------
 static/usage/v7/toggle/justify/vue.md                  | 7 +------
 static/usage/v7/toggle/label-placement/vue.md          | 7 +------
 static/usage/v7/toggle/list/vue.md                     | 7 +------
 static/usage/v7/toggle/on-off/vue.md                   | 7 +------
 static/usage/v7/toggle/theming/colors/vue.md           | 7 +------
 static/usage/v7/toggle/theming/css-properties/vue.md   | 7 +------
 static/usage/v7/toggle/theming/css-shadow-parts/vue.md | 7 +------
 9 files changed, 9 insertions(+), 56 deletions(-)

diff --git a/static/usage/v7/toggle/alignment/vue.md b/static/usage/v7/toggle/alignment/vue.md
index b3bce543aa6..d86db26dbb9 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 lang="ts" setup>
   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..b2c5ae6941e 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 lang="ts" setup>
   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..03df02e9802 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 lang="ts" setup>
   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..2bcd1bc23c5 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 lang="ts" setup>
   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..f845a405220 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 lang="ts" setup>
   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..052ef5c3edc 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 lang="ts" setup>
   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..8dbc052ccef 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 lang="ts" setup>
   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..89eef0f7448 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 lang="ts" setup>
   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..495394942dc 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 lang="ts" setup>
   import { IonToggle } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonToggle },
-  });
 </script>
 
 <style scoped>

From 559b5eafbd8297d37a11d6b03bfdcfc6bd01af74 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:44:57 -0500
Subject: [PATCH 53/58] toolbar

---
 static/usage/v7/toolbar/basic/vue.md                  |  7 +------
 static/usage/v7/toolbar/buttons/vue.md                | 10 +---------
 static/usage/v7/toolbar/progress-bars/vue.md          |  7 +------
 static/usage/v7/toolbar/searchbars/vue.md             |  7 +------
 static/usage/v7/toolbar/segments/vue.md               |  7 +------
 static/usage/v7/toolbar/theming/colors/vue.md         |  7 +------
 static/usage/v7/toolbar/theming/css-properties/vue.md |  7 +------
 7 files changed, 7 insertions(+), 45 deletions(-)

diff --git a/static/usage/v7/toolbar/basic/vue.md b/static/usage/v7/toolbar/basic/vue.md
index ec71b1a340b..c9df6be3e47 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 lang="ts" setup>
   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..3a23ab97570 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 lang="ts" setup>
   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..777f71a8f68 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 lang="ts" setup>
   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..2fa15858664 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 lang="ts" setup>
   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..9f60c121868 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 lang="ts" setup>
   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..9df7ee02120 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 lang="ts" setup>
   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..71a2ac18bf0 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 lang="ts" setup>
   import { IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTitle, IonToolbar },
-  });
 </script>
 
 <style scoped>

From 811936ffa64483f25fdf02e0827a656895a2495e Mon Sep 17 00:00:00 2001
From: Roger! <icarus.gk@gmail.com>
Date: Fri, 15 Sep 2023 17:25:57 -0600
Subject: [PATCH 54/58] refactor: `<ion-avatar />`

Co-authored-by: icarusgk icarusgk@users.noreply.github.com
---
 static/usage/v7/avatar/basic/vue.md                  | 9 ++-------
 static/usage/v7/avatar/chip/vue.md                   | 9 ++-------
 static/usage/v7/avatar/item/vue.md                   | 9 ++-------
 static/usage/v7/avatar/theming/css-properties/vue.md | 9 ++-------
 4 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/static/usage/v7/avatar/basic/vue.md b/static/usage/v7/avatar/basic/vue.md
index 5136ca90400..ad41235b03e 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">
-  import { IonAvatar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar },
-  });
+<script lang="ts" setup>
+import { IonAvatar } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/avatar/chip/vue.md b/static/usage/v7/avatar/chip/vue.md
index c872bb48de3..979d6cb4ce7 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">
-  import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar, IonChip, IonLabel },
-  });
+<script lang="ts" setup>
+import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md
index 5a9ddea4499..1e606f6edf4 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">
-  import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar, IonItem, IonLabel },
-  });
+<script lang="ts" setup>
+import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
 </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..543bf3cf13f 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">
-  import { IonAvatar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonAvatar },
-  });
+<script lang="ts" setup>
+import { IonAvatar } from '@ionic/vue';
 </script>
 
 <style scoped>

From 22c2363e13ad8e7813d542bcfab5805c84565761 Mon Sep 17 00:00:00 2001
From: Roger! <icarus.gk@gmail.com>
Date: Fri, 15 Sep 2023 19:48:04 -0600
Subject: [PATCH 55/58] refactor: `<ion-back-button />`

Co-authored-by: icarusgk icarusgk@users.noreply.github.com
---
 .../usage/v7/back-button/basic/vue/page_two_vue.md  |  8 ++------
 .../usage/v7/back-button/custom/vue/page_two_vue.md | 13 +++----------
 2 files changed, 5 insertions(+), 16 deletions(-)

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..d3d6a3b16e3 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">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
-
-  export default {
-    components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar },
-  };
+<script lang="ts" setup>
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
 </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..7b38ad9bd7a 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">
-  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 lang="ts" setup>
+import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+import { caretBack } from 'ionicons/icons';
 </script>
 ```

From c0f1a98dc9887b1169de7a5009abb671edfc1d67 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 14:59:35 -0500
Subject: [PATCH 56/58] lint

---
 static/usage/v7/avatar/basic/vue.md                    | 2 +-
 static/usage/v7/avatar/chip/vue.md                     | 2 +-
 static/usage/v7/avatar/item/vue.md                     | 2 +-
 static/usage/v7/avatar/theming/css-properties/vue.md   | 2 +-
 static/usage/v7/back-button/basic/vue/page_two_vue.md  | 2 +-
 static/usage/v7/back-button/custom/vue/page_two_vue.md | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/static/usage/v7/avatar/basic/vue.md b/static/usage/v7/avatar/basic/vue.md
index ad41235b03e..18138c2ed49 100644
--- a/static/usage/v7/avatar/basic/vue.md
+++ b/static/usage/v7/avatar/basic/vue.md
@@ -6,6 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import { IonAvatar } from '@ionic/vue';
+  import { IonAvatar } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/avatar/chip/vue.md b/static/usage/v7/avatar/chip/vue.md
index 979d6cb4ce7..c608c4b2163 100644
--- a/static/usage/v7/avatar/chip/vue.md
+++ b/static/usage/v7/avatar/chip/vue.md
@@ -9,6 +9,6 @@
 </template>
 
 <script lang="ts" setup>
-import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
+  import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md
index 1e606f6edf4..a3e33447ac8 100644
--- a/static/usage/v7/avatar/item/vue.md
+++ b/static/usage/v7/avatar/item/vue.md
@@ -9,6 +9,6 @@
 </template>
 
 <script lang="ts" setup>
-import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
+  import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
 </script>
 ```
diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md
index 543bf3cf13f..645968f3ea2 100644
--- a/static/usage/v7/avatar/theming/css-properties/vue.md
+++ b/static/usage/v7/avatar/theming/css-properties/vue.md
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { IonAvatar } from '@ionic/vue';
+  import { IonAvatar } from '@ionic/vue';
 </script>
 
 <style scoped>
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 d3d6a3b16e3..b2bed90a389 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
@@ -15,6 +15,6 @@
 </template>
 
 <script lang="ts" setup>
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
 </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 7b38ad9bd7a..d6937d7e397 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
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
-import { caretBack } from 'ionicons/icons';
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+  import { caretBack } from 'ionicons/icons';
 </script>
 ```

From d0aeb8feb7d7ba6ced875762d953dc503e097f86 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 17:12:18 -0500
Subject: [PATCH 57/58] modal

---
 .../usage/v7/modal/can-dismiss/boolean/vue.md | 48 ++++----------
 .../v7/modal/can-dismiss/function/vue.md      | 65 ++++++++-----------
 2 files changed, 42 insertions(+), 71 deletions(-)

diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
index 3504c7230cd..6ce5c230c95 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -9,7 +9,7 @@
     <ion-content class="ion-padding">
       <ion-button id="open-modal" expand="block">Open</ion-button>
 
-      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="page?.$el">
         <ion-header>
           <ion-toolbar>
             <ion-title>Modal</ion-title>
@@ -31,7 +31,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     CheckboxCustomEvent,
     IonButtons,
@@ -45,38 +45,18 @@
     IonCheckbox,
     IonPage,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } 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(ev: CheckboxCustomEvent) {
-        this.canDismiss = ev.detail.checked;
-      },
-    },
-    mounted() {
-      this.presentingElement = this.$refs.page.$el;
-    },
-  });
+  const modal = ref();
+  const page = ref();
+  const canDismiss = ref(false);
+
+  function dismiss() {
+    modal.value.$el.dismiss();
+  }
+
+  function onTermsChanged(ev: CheckboxCustomEvent) {
+    canDismiss.value = ev.detail.checked;
+  }
 </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..cfbd05fb884 100644
--- a/static/usage/v7/modal/can-dismiss/function/vue.md
+++ b/static/usage/v7/modal/can-dismiss/function/vue.md
@@ -9,7 +9,7 @@
     <ion-content class="ion-padding">
       <ion-button id="open-modal" expand="block">Open</ion-button>
 
-      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="presentingElement">
+      <ion-modal ref="modal" trigger="open-modal" :can-dismiss="canDismiss" :presenting-element="page?.$el">
         <ion-header>
           <ion-toolbar>
             <ion-title>Modal</ion-title>
@@ -26,7 +26,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
     IonButtons,
     IonButton,
@@ -38,41 +38,32 @@
     IonPage,
     actionSheetController,
   } from '@ionic/vue';
-  import { defineComponent } from 'vue';
+  import { ref } 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 modal = ref();
+  const page = ref();
+
+  function dismiss() {
+    modal.value.$el.dismiss();
+  }
+
+  async function 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';
+  }
 </script>
 ```

From faed9d16fbadd90bec7f6a5c8ed757f1686c230e Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 15 Dec 2023 17:56:33 -0500
Subject: [PATCH 58/58] progress-bar

---
 static/usage/v7/progress-bar/buffer/vue.md    | 43 ++++++++-----------
 .../usage/v7/progress-bar/determinate/vue.md  | 37 ++++++----------
 .../v7/progress-bar/indeterminate/vue.md      |  7 +--
 .../v7/progress-bar/theming/colors/vue.md     |  7 +--
 .../theming/css-properties/vue.md             |  7 +--
 .../theming/css-shadow-parts/vue.md           |  7 +--
 6 files changed, 35 insertions(+), 73 deletions(-)

diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md
index c70c23eb470..1c34ed0b0ab 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 lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { onMounted, ref } 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..6e67a718822 100644
--- a/static/usage/v7/progress-bar/determinate/vue.md
+++ b/static/usage/v7/progress-bar/determinate/vue.md
@@ -3,32 +3,23 @@
   <ion-progress-bar :value="progress"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonProgressBar },
-    setup() {
-      let progress = ref(0);
+  const progress = ref(0);
+  onMounted(() => {
+    setInterval(() => {
+      progress.value += 0.01;
 
-      return {
-        progress,
-      };
-    },
-    mounted() {
-      setInterval(() => {
-        this.progress += 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..f1274d81038 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 lang="ts" setup>
   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..1d495faa6f9 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 lang="ts" setup>
   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..4c732932fb3 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 lang="ts" setup>
   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..d75168fa7cf 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 lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 
 <style scoped>