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>
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>
 ```