diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index f3f18c8cd39..4d5372db084 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -130,17 +130,9 @@ export const TabBarExample: React.FC = () => (
   </ion-tabs>
 </template>
 
-<script>
+<script setup lang="ts">
 import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
 import { call, person, settings } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
-  setup() {
-    return { call, person, settings }
-  }
-});
 </script>
 ```
 
@@ -176,4 +168,4 @@ import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index 937735ba53b..d8b151d777c 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -12,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v8/tab-button/custom-prop
 import Slots from '@ionic-internal/component-api/v8/tab-button/slots.md';
 
 
- 
+
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
@@ -166,7 +166,7 @@ export const TabButtonExample: React.FC = () => (
       </ion-tab-button>
 
       <ion-tab-button tab="speakers" href="/tabs/speakers">
-        <ion-icon :icon="person-circle" aria-hidden="true"></ion-icon>
+        <ion-icon :icon="personCircle" aria-hidden="true"></ion-icon>
         <ion-label>Speakers</ion-label>
       </ion-tab-button>
 
@@ -183,29 +183,15 @@ export const TabButtonExample: React.FC = () => (
   </ion-tabs>
 </template>
 
-<script>
-import { 
-  IonIcon, 
-  IonLabel, 
-  IonTabBar, 
-  IonTabButton, 
+<script setup lang="ts">
+import {
+  IonIcon,
+  IonLabel,
+  IonTabBar,
+  IonTabButton,
   IonTabs
 } from '@ionic/vue';
 import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonIcon, 
-    IonLabel, 
-    IonTabBar, 
-    IonTabButton, 
-    IonTabs
-  },
-  setup() {
-    return { calendar, informationCircle, map, personCircle }
-  }
-});
 </script>
 ```
 
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index 1841b6e52a2..b8698ef3377 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -122,13 +122,9 @@ import { useBackButton } from '@ionic/vue';
 
 ...
 
-export default {
-  setup() {
-    useBackButton(10, () => {
-      console.log('Handler was called!');
-    });
-  }
-}
+useBackButton(10, () => {
+  console.log('Handler was called!');
+});
 ```
 </TabItem>
 </Tabs>
@@ -236,19 +232,15 @@ import { useBackButton } from '@ionic/vue';
 
 ...
 
-export default {
-  setup() {
-    useBackButton(5, () => {
-      console.log('Another handler was called!');
-    });
+useBackButton(5, () => {
+  console.log('Another handler was called!');
+});
 
-    useBackButton(10, (processNextHandler) => {
-      console.log('Handler was called!');
+useBackButton(10, (processNextHandler) => {
+  console.log('Handler was called!');
 
-      processNextHandler();
-    });
-  }
-}
+  processNextHandler();
+});
 ```
 </TabItem>
 </Tabs>
@@ -385,16 +377,12 @@ import { App } from '@capacitor/app';
 
 ...
 
-export default {
-  setup() {
-    const ionRouter = useIonRouter();
-    useBackButton(-1, () => {
-      if (!ionRouter.canGoBack()) {
-        App.exitApp();
-      }
-    });
+const ionRouter = useIonRouter();
+useBackButton(-1, () => {
+  if (!ionRouter.canGoBack()) {
+    App.exitApp();
   }
-}
+});
 ```
 </TabItem>
 </Tabs>
diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md
index d9f7ef2cec6..d44cae1ba23 100644
--- a/docs/updating/6-0.md
+++ b/docs/updating/6-0.md
@@ -196,13 +196,8 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
   <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
-<script>
+<script setup lang="ts">
   import { IonTabs, IonTabBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar },
-  });
 </script>
 ```
 
@@ -214,13 +209,8 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
   <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
-<script>
+<script setup lang="ts">
   import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar, IonRouterOutlet },
-  });
 </script>
 ```
 
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index fe0e8ad01aa..f6c5fa54232 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -22,27 +22,25 @@ These lifecycles are only called on components directly mapped by a router. This
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
 ```tsx
+<script setup lang="ts">
 import { IonPage } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Home',
-  ionViewDidEnter() {
-    console.log('Home page did enter');
-  },
-  ionViewDidLeave() {
-    console.log('Home page did leave');
-  },
-  ionViewWillEnter() {
-    console.log('Home page will enter');
-  },
-  ionViewWillLeave() {
-    console.log('Home page will leave');
-  },
-  components: {
-    IonPage,
-  },
-});
+
+const ionViewDidEnter = () => {
+  console.log('Home page did enter');
+};
+
+const ionViewDidLeave = () => {
+  console.log('Home page did leave');
+};
+
+const ionViewWillEnter = () => {
+  console.log('Home page will enter');
+};
+
+const ionViewWillLeave = () => {
+  console.log('Home page will leave');
+};
+</script>
 ```
 
 ### Composition API Hooks
@@ -50,32 +48,25 @@ export default defineComponent({
 These lifecycles can also be expressed using Vue 3's Composition API:
 
 ```tsx
+<script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    IonPage,
-  },
-  setup() {
-    onIonViewDidEnter(() => {
-      console.log('Home page did enter');
-    });
-
-    onIonViewDidLeave(() => {
-      console.log('Home page did leave');
-    });
-
-    onIonViewWillEnter(() => {
-      console.log('Home page will enter');
-    });
-
-    onIonViewWillLeave(() => {
-      console.log('Home page will leave');
-    });
-  },
+
+onIonViewDidEnter(() => {
+  console.log('Home page did enter');
+});
+
+onIonViewDidLeave(() => {
+  console.log('Home page did leave');
+});
+
+onIonViewWillEnter(() => {
+  console.log('Home page will enter');
+});
+
+onIonViewWillLeave(() => {
+  console.log('Home page will leave');
 });
+</script>
 ```
 
 :::note
diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index 1012bce6bb8..24d9ea2d8d7 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -112,23 +112,11 @@ We can also programmatically navigate in our app by using the router API:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { useRouter } from 'vue-router';
 
-  export default defineComponent({
-    name: 'HomePage',
-    components: {
-      IonButton,
-      IonContent,
-      IonPage,
-    },
-    setup() {
-      const router = useRouter();
-      return { router };
-    },
-  });
+  const router = useRouter();
 </script>
 ```
 
@@ -155,35 +143,21 @@ The `useIonRouter` utility is a function that provides methods for programmatic
 This first example lets us push a new page onto the stack with a custom page transition:
 
 ```js
-import { defineComponent } from 'vue';
 import { useIonRouter } from '@ionic/vue';
 import { customAnimation } from '@/animations/customAnimation';
 
-export default defineComponent({
-  ...,
-  setup() {
-    const ionRouter = useIonRouter();
-
-    ionRouter.push('/page2', customAnimation);
-  }
-});
+const ionRouter = useIonRouter();
+ionRouter.push('/page2', customAnimation);
 ```
 
 `useIonRouter` provides convenience `push`, `replace`, `back`, and `forward` methods to make it easy to use common navigation actions. It also provides a `navigate` method which can be used in more complex navigation scenarios:
 
 ```js
-import { defineComponent } from 'vue';
 import { useIonRouter } from '@ionic/vue';
 import { customAnimation } from '@/animations/customAnimation';
 
-export default defineComponent({
-  ...,
-  setup() {
-    const ionRouter = useIonRouter();
-
-    ionRouter.navigate('/page2', 'forward', 'replace', customAnimation);
-  }
-});
+const ionRouter = useIonRouter();
+ionRouter.navigate('/page2', 'forward', 'replace', customAnimation);
 ```
 
 The example above has the app navigate to `/page2` with a custom animation that uses the forward direction. In addition, the `replace` value ensures that the app replaces the current history entry when navigating.
@@ -415,29 +389,9 @@ Let's start by taking a look at our `Tabs` component:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
   import { ellipse, square, triangle } from 'ionicons/icons';
-
-  export default {
-    name: 'Tabs',
-    components: {
-      IonLabel,
-      IonTabs,
-      IonTabBar,
-      IonTabButton,
-      IonIcon,
-      IonPage,
-      IonRouterOutlet,
-    },
-    setup() {
-      return {
-        ellipse,
-        square,
-        triangle,
-      };
-    },
-  };
 </script>
 ```
 
@@ -552,19 +506,8 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
 
@@ -620,26 +563,12 @@ Let's look at how to use it in our component:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { useRoute } from 'vue-router';
 
-  export default defineComponent({
-    name: 'Detail',
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-    setup() {
-      const route = useRoute();
-      const { id } = route.params;
-      return { id };
-    },
-  });
+  const route = useRoute();
+  const { id } = route.params;
 </script>
 ```
 
diff --git a/docs/vue/performance.md b/docs/vue/performance.md
index 6bdfd52346f..967ba356112 100644
--- a/docs/vue/performance.md
+++ b/docs/vue/performance.md
@@ -21,27 +21,15 @@ By using `key` you can provide a stable identity for each loop element so Vue ca
   </ion-page>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonItem,
-      IonLabel,
-      IonPage
-    },
-    setup() {
-      const items = ref([
-        { id: 0, value: 'Item 0' },
-        { id: 1, value: 'Item 1' },
-        ...
-      ]);
-
-      return { items }
-    }
-  });
+  import { ref } from 'vue';
+
+  const items = ref([
+    { id: 0, value: 'Item 0' },
+    { id: 1, value: 'Item 1' },
+    ...
+  ]);
 </script>
 ```
 
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index fab18e0cb1a..0a9d531d4e9 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -49,15 +49,9 @@ Next, we need to import the base Swiper styles. We are also going to import the
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
 ```html
-<script>
-  import { defineComponent } from 'vue';
-
+<script setup lang="ts">
   import 'swiper/css';
   import '@ionic/vue/css/ionic-swiper.css';
-
-  export default defineComponent({
-    ...
-  });
 </script>
 ```
 
@@ -111,22 +105,12 @@ These components are imported from `swiper/vue` and provided to your Vue compone
   </ion-page>
 </template>
 
-<script>
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
   import 'swiper/css';
   import '@ionic/vue/css/ionic-swiper.css';
-
-  export default defineComponent({
-    components: {
-      Swiper,
-      SwiperSlide,
-      IonContent,
-      IonPage,
-    },
-  });
 </script>
 ```
 
@@ -150,8 +134,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
     </ion-content>
   </ion-page>
 </template>
-<script>
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
@@ -163,10 +146,6 @@ To begin, we need to import the modules and their corresponding CSS files from t
   import 'swiper/css/scrollbar';
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
-
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-  });
 </script>
 ```
 
@@ -185,7 +164,6 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
@@ -198,14 +176,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
-      };
-    },
-  });
+  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
@@ -224,7 +195,6 @@ Finally, we can turn these features on by using the appropriate properties:
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
@@ -237,14 +207,7 @@ Finally, we can turn these features on by using the appropriate properties:
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
-      };
-    },
-  });
+  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
@@ -272,8 +235,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
     </ion-content>
   </ion-page>
 </template>
-<script>
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -286,14 +248,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides],
-      };
-    },
-  });
+  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides];
 </script>
 ```
 
@@ -406,18 +361,13 @@ Accessing these properties can be tricky as you want to access the properties on
   <swiper @swiper="setSwiperInstance"> ... </swiper>
 </template>
 
-<script>
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    ...,
-    setup() {
-      const slides = ref();
-      const setSwiperInstance = (swiper: any) => {
-        slides.value = swiper;
-      }
-      return { setSwiperInstance };
-    }
-  });
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  const slides = ref();
+  const setSwiperInstance = (swiper: any) => {
+    slides.value = swiper;
+  };
 </script>
 ```
 
@@ -456,7 +406,6 @@ If you are using effects such as Cube or Fade, you can install them just like we
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -464,14 +413,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
   import 'swiper/css';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [EffectFade, IonicSlides],
-      };
-    },
-  });
+  const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
@@ -490,7 +432,6 @@ Next, we need to import the stylesheet associated with the effect:
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -499,14 +440,7 @@ Next, we need to import the stylesheet associated with the effect:
   import 'swiper/css/effect-fade';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [EffectFade, IonicSlides],
-      };
-    },
-  });
+  const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
@@ -525,7 +459,6 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -534,14 +467,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
   import 'swiper/css/effect-fade';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [EffectFade, IonicSlides],
-      };
-    },
-  });
+  const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
diff --git a/docs/vue/troubleshooting.md b/docs/vue/troubleshooting.md
index 1483bb9037b..8ce3b22d68e 100644
--- a/docs/vue/troubleshooting.md
+++ b/docs/vue/troubleshooting.md
@@ -31,13 +31,8 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr
   <ion-button>Hello World</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
 
@@ -97,19 +92,8 @@ In order for page transitions to work correctly, each page must have an `ion-pag
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
 
diff --git a/docs/vue/utility-functions.md b/docs/vue/utility-functions.md
index 519b9265b12..f84ec85165c 100644
--- a/docs/vue/utility-functions.md
+++ b/docs/vue/utility-functions.md
@@ -16,23 +16,15 @@ Returns the Ionic router instance, containing API methods for navigating, custom
 
 ```js
 import { IonPage, useIonRouter } from '@ionic/vue';
-import { defineComponent } from 'vue';
 import { customAnimation } from '@/animations/customAnimation';
 
-export default defineComponent({
-  components: { IonPage },
-  setup() {
-    const router = useIonRouter();
-    const push = () => {
-      router.push('/page2', customAnimation);
-    };
-    const back = () => {
-      router.back(customAnimation);
-    };
-
-    return { push, back };
-  },
-});
+const router = useIonRouter();
+const push = () => {
+  router.push('/page2', customAnimation);
+};
+const back = () => {
+  router.back(customAnimation);
+};
 ```
 
 **Hardware back button on Android**
@@ -42,15 +34,9 @@ You may want to know if you are at the root page of the application when a user
 ```tsx
 import { useIonRouter } from '@ionic/vue';
 
-...
-
-export default {
-  setup() {
-    const ionRouter = useIonRouter();
-    if (ionRouter.canGoBack()) {
-      // Perform some action here
-    }
-  }
+const ionRouter = useIonRouter();
+if (ionRouter.canGoBack()) {
+  // Perform some action here
 }
 ```
 
@@ -152,29 +138,25 @@ See the [Keyboard Documentation](../developing/keyboard) for more information an
 Ionic Vue provides several lifecycle hooks for the `setup()` function to tap into the Ionic Framework page lifecycle.
 
 ```js
+<script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonPage },
-  setup() {
-    onIonViewDidEnter(() => {
-      console.log('Page did enter');
-    });
-
-    onIonViewDidLeave(() => {
-      console.log('Page did leave');
-    });
-
-    onIonViewWillEnter(() => {
-      console.log('Page will enter');
-    });
-
-    onIonViewWillLeave(() => {
-      console.log('Page will leave');
-    });
-  },
+
+onIonViewDidEnter(() => {
+  console.log('Page did enter');
+});
+
+onIonViewDidLeave(() => {
+  console.log('Page did leave');
+});
+
+onIonViewWillEnter(() => {
+  console.log('Page will enter');
+});
+
+onIonViewWillLeave(() => {
+  console.log('Page will leave');
 });
+</script>
 ```
 
 :::note
diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md
index 7ba68ce8a59..84ffece148d 100644
--- a/docs/vue/virtual-scroll.md
+++ b/docs/vue/virtual-scroll.md
@@ -89,24 +89,11 @@ The `RecycleScroller` component should be added inside of your `ion-content` com
   </ion-page>
 </template>
 
-<script>
-  import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+  import { ref } from 'vue';
   import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
 
-  export default defineComponent({
-    components: {
-      IonAvatar,
-      IonContent,
-      IonItem,
-      IonLabel,
-      IonPage,
-    },
-    setup() {
-      const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-
-      return { list };
-    },
-  });
+  const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/api/tab-bar.md b/versioned_docs/version-v7/api/tab-bar.md
index ac9870f5aba..c49d9507557 100644
--- a/versioned_docs/version-v7/api/tab-bar.md
+++ b/versioned_docs/version-v7/api/tab-bar.md
@@ -126,17 +126,9 @@ export const TabBarExample: React.FC = () => (
   </ion-tabs>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
   import { call, person, settings } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
-    setup() {
-      return { call, person, settings };
-    },
-  });
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/api/tab-button.md b/versioned_docs/version-v7/api/tab-button.md
index 67f3bd97fe6..206e2caabde 100644
--- a/versioned_docs/version-v7/api/tab-button.md
+++ b/versioned_docs/version-v7/api/tab-button.md
@@ -172,23 +172,9 @@ export const TabButtonExample: React.FC = () => (
   </ion-tabs>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
   import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonIcon,
-      IonLabel,
-      IonTabBar,
-      IonTabButton,
-      IonTabs,
-    },
-    setup() {
-      return { calendar, informationCircle, map, personCircle };
-    },
-  });
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/developing/hardware-back-button.md b/versioned_docs/version-v7/developing/hardware-back-button.md
index 1841b6e52a2..b8698ef3377 100644
--- a/versioned_docs/version-v7/developing/hardware-back-button.md
+++ b/versioned_docs/version-v7/developing/hardware-back-button.md
@@ -122,13 +122,9 @@ import { useBackButton } from '@ionic/vue';
 
 ...
 
-export default {
-  setup() {
-    useBackButton(10, () => {
-      console.log('Handler was called!');
-    });
-  }
-}
+useBackButton(10, () => {
+  console.log('Handler was called!');
+});
 ```
 </TabItem>
 </Tabs>
@@ -236,19 +232,15 @@ import { useBackButton } from '@ionic/vue';
 
 ...
 
-export default {
-  setup() {
-    useBackButton(5, () => {
-      console.log('Another handler was called!');
-    });
+useBackButton(5, () => {
+  console.log('Another handler was called!');
+});
 
-    useBackButton(10, (processNextHandler) => {
-      console.log('Handler was called!');
+useBackButton(10, (processNextHandler) => {
+  console.log('Handler was called!');
 
-      processNextHandler();
-    });
-  }
-}
+  processNextHandler();
+});
 ```
 </TabItem>
 </Tabs>
@@ -385,16 +377,12 @@ import { App } from '@capacitor/app';
 
 ...
 
-export default {
-  setup() {
-    const ionRouter = useIonRouter();
-    useBackButton(-1, () => {
-      if (!ionRouter.canGoBack()) {
-        App.exitApp();
-      }
-    });
+const ionRouter = useIonRouter();
+useBackButton(-1, () => {
+  if (!ionRouter.canGoBack()) {
+    App.exitApp();
   }
-}
+});
 ```
 </TabItem>
 </Tabs>
diff --git a/versioned_docs/version-v7/updating/6-0.md b/versioned_docs/version-v7/updating/6-0.md
index 321daf2f0e3..0351b29fdbe 100644
--- a/versioned_docs/version-v7/updating/6-0.md
+++ b/versioned_docs/version-v7/updating/6-0.md
@@ -196,13 +196,8 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
   <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
-<script>
+<script setup lang="ts">
   import { IonTabs, IonTabBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar },
-  });
 </script>
 ```
 
@@ -214,13 +209,8 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io
   <ion-tab-bar slot="bottom"> ... </ion-tab-bar>
 </ion-tabs>
 
-<script>
+<script setup lang="ts">
   import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonTabs, IonTabBar, IonRouterOutlet },
-  });
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/lifecycle.md b/versioned_docs/version-v7/vue/lifecycle.md
index fe0e8ad01aa..f6c5fa54232 100644
--- a/versioned_docs/version-v7/vue/lifecycle.md
+++ b/versioned_docs/version-v7/vue/lifecycle.md
@@ -22,27 +22,25 @@ These lifecycles are only called on components directly mapped by a router. This
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
 ```tsx
+<script setup lang="ts">
 import { IonPage } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Home',
-  ionViewDidEnter() {
-    console.log('Home page did enter');
-  },
-  ionViewDidLeave() {
-    console.log('Home page did leave');
-  },
-  ionViewWillEnter() {
-    console.log('Home page will enter');
-  },
-  ionViewWillLeave() {
-    console.log('Home page will leave');
-  },
-  components: {
-    IonPage,
-  },
-});
+
+const ionViewDidEnter = () => {
+  console.log('Home page did enter');
+};
+
+const ionViewDidLeave = () => {
+  console.log('Home page did leave');
+};
+
+const ionViewWillEnter = () => {
+  console.log('Home page will enter');
+};
+
+const ionViewWillLeave = () => {
+  console.log('Home page will leave');
+};
+</script>
 ```
 
 ### Composition API Hooks
@@ -50,32 +48,25 @@ export default defineComponent({
 These lifecycles can also be expressed using Vue 3's Composition API:
 
 ```tsx
+<script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    IonPage,
-  },
-  setup() {
-    onIonViewDidEnter(() => {
-      console.log('Home page did enter');
-    });
-
-    onIonViewDidLeave(() => {
-      console.log('Home page did leave');
-    });
-
-    onIonViewWillEnter(() => {
-      console.log('Home page will enter');
-    });
-
-    onIonViewWillLeave(() => {
-      console.log('Home page will leave');
-    });
-  },
+
+onIonViewDidEnter(() => {
+  console.log('Home page did enter');
+});
+
+onIonViewDidLeave(() => {
+  console.log('Home page did leave');
+});
+
+onIonViewWillEnter(() => {
+  console.log('Home page will enter');
+});
+
+onIonViewWillLeave(() => {
+  console.log('Home page will leave');
 });
+</script>
 ```
 
 :::note
diff --git a/versioned_docs/version-v7/vue/navigation.md b/versioned_docs/version-v7/vue/navigation.md
index 1012bce6bb8..24d9ea2d8d7 100644
--- a/versioned_docs/version-v7/vue/navigation.md
+++ b/versioned_docs/version-v7/vue/navigation.md
@@ -112,23 +112,11 @@ We can also programmatically navigate in our app by using the router API:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonContent, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { useRouter } from 'vue-router';
 
-  export default defineComponent({
-    name: 'HomePage',
-    components: {
-      IonButton,
-      IonContent,
-      IonPage,
-    },
-    setup() {
-      const router = useRouter();
-      return { router };
-    },
-  });
+  const router = useRouter();
 </script>
 ```
 
@@ -155,35 +143,21 @@ The `useIonRouter` utility is a function that provides methods for programmatic
 This first example lets us push a new page onto the stack with a custom page transition:
 
 ```js
-import { defineComponent } from 'vue';
 import { useIonRouter } from '@ionic/vue';
 import { customAnimation } from '@/animations/customAnimation';
 
-export default defineComponent({
-  ...,
-  setup() {
-    const ionRouter = useIonRouter();
-
-    ionRouter.push('/page2', customAnimation);
-  }
-});
+const ionRouter = useIonRouter();
+ionRouter.push('/page2', customAnimation);
 ```
 
 `useIonRouter` provides convenience `push`, `replace`, `back`, and `forward` methods to make it easy to use common navigation actions. It also provides a `navigate` method which can be used in more complex navigation scenarios:
 
 ```js
-import { defineComponent } from 'vue';
 import { useIonRouter } from '@ionic/vue';
 import { customAnimation } from '@/animations/customAnimation';
 
-export default defineComponent({
-  ...,
-  setup() {
-    const ionRouter = useIonRouter();
-
-    ionRouter.navigate('/page2', 'forward', 'replace', customAnimation);
-  }
-});
+const ionRouter = useIonRouter();
+ionRouter.navigate('/page2', 'forward', 'replace', customAnimation);
 ```
 
 The example above has the app navigate to `/page2` with a custom animation that uses the forward direction. In addition, the `replace` value ensures that the app replaces the current history entry when navigating.
@@ -415,29 +389,9 @@ Let's start by taking a look at our `Tabs` component:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
   import { ellipse, square, triangle } from 'ionicons/icons';
-
-  export default {
-    name: 'Tabs',
-    components: {
-      IonLabel,
-      IonTabs,
-      IonTabBar,
-      IonTabButton,
-      IonIcon,
-      IonPage,
-      IonRouterOutlet,
-    },
-    setup() {
-      return {
-        ellipse,
-        square,
-        triangle,
-      };
-    },
-  };
 </script>
 ```
 
@@ -552,19 +506,8 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
 
@@ -620,26 +563,12 @@ Let's look at how to use it in our component:
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
   import { useRoute } from 'vue-router';
 
-  export default defineComponent({
-    name: 'Detail',
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-    setup() {
-      const route = useRoute();
-      const { id } = route.params;
-      return { id };
-    },
-  });
+  const route = useRoute();
+  const { id } = route.params;
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/performance.md b/versioned_docs/version-v7/vue/performance.md
index 6bdfd52346f..967ba356112 100644
--- a/versioned_docs/version-v7/vue/performance.md
+++ b/versioned_docs/version-v7/vue/performance.md
@@ -21,27 +21,15 @@ By using `key` you can provide a stable identity for each loop element so Vue ca
   </ion-page>
 </template>
 
-<script>
+<script setup lang="ts">
   import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonItem,
-      IonLabel,
-      IonPage
-    },
-    setup() {
-      const items = ref([
-        { id: 0, value: 'Item 0' },
-        { id: 1, value: 'Item 1' },
-        ...
-      ]);
-
-      return { items }
-    }
-  });
+  import { ref } from 'vue';
+
+  const items = ref([
+    { id: 0, value: 'Item 0' },
+    { id: 1, value: 'Item 1' },
+    ...
+  ]);
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/slides.md b/versioned_docs/version-v7/vue/slides.md
index 1c62f3f8188..a39a045bdec 100644
--- a/versioned_docs/version-v7/vue/slides.md
+++ b/versioned_docs/version-v7/vue/slides.md
@@ -49,15 +49,9 @@ Next, we need to import the base Swiper styles. We are also going to import the
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
 ```html
-<script>
-  import { defineComponent } from 'vue';
-
+<script setup lang="ts">
   import 'swiper/css';
   import '@ionic/vue/css/ionic-swiper.css';
-
-  export default defineComponent({
-    ...
-  });
 </script>
 ```
 
@@ -111,22 +105,12 @@ These components are imported from `swiper/vue` and provided to your Vue compone
   </ion-page>
 </template>
 
-<script>
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
   import 'swiper/css';
   import '@ionic/vue/css/ionic-swiper.css';
-
-  export default defineComponent({
-    components: {
-      Swiper,
-      SwiperSlide,
-      IonContent,
-      IonPage,
-    },
-  });
 </script>
 ```
 
@@ -150,8 +134,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
     </ion-content>
   </ion-page>
 </template>
-<script>
-  import { defineComponent } from 'vue';
+<script setup lang="ts">
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
@@ -163,10 +146,6 @@ To begin, we need to import the modules and their corresponding CSS files from t
   import 'swiper/css/scrollbar';
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
-
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-  });
 </script>
 ```
 
@@ -185,7 +164,6 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
@@ -198,14 +176,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
-      };
-    },
-  });
+  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
@@ -224,7 +195,6 @@ Finally, we can turn these features on by using the appropriate properties:
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
@@ -237,14 +207,7 @@ Finally, we can turn these features on by using the appropriate properties:
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
-      };
-    },
-  });
+  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
@@ -273,7 +236,6 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -286,14 +248,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
   import 'swiper/css/zoom';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides],
-      };
-    },
-  });
+  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides];
 </script>
 ```
 
@@ -406,18 +361,13 @@ Accessing these properties can be tricky as you want to access the properties on
   <swiper @swiper="setSwiperInstance"> ... </swiper>
 </template>
 
-<script>
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    ...,
-    setup() {
-      const slides = ref();
-      const setSwiperInstance = (swiper: any) => {
-        slides.value = swiper;
-      }
-      return { setSwiperInstance };
-    }
-  });
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  const slides = ref();
+  const setSwiperInstance = (swiper: any) => {
+    slides.value = swiper;
+  };
 </script>
 ```
 
@@ -456,7 +406,6 @@ If you are using effects such as Cube or Fade, you can install them just like we
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -464,14 +413,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
   import 'swiper/css';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [EffectFade, IonicSlides],
-      };
-    },
-  });
+  const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
@@ -490,7 +432,6 @@ Next, we need to import the stylesheet associated with the effect:
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -499,14 +440,7 @@ Next, we need to import the stylesheet associated with the effect:
   import 'swiper/css/effect-fade';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [EffectFade, IonicSlides],
-      };
-    },
-  });
+  const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
@@ -525,7 +459,6 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
   </ion-page>
 </template>
 <script>
-  import { defineComponent } from 'vue';
   import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
@@ -534,14 +467,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
   import 'swiper/css/effect-fade';
   import '@ionic/vue/css/ionic-swiper.css';
 
-  export default defineComponent({
-    components: { Swiper, SwiperSlide, IonContent, IonPage },
-    setup() {
-      return {
-        modules: [EffectFade, IonicSlides],
-      };
-    },
-  });
+  const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/troubleshooting.md b/versioned_docs/version-v7/vue/troubleshooting.md
index 1483bb9037b..8ce3b22d68e 100644
--- a/versioned_docs/version-v7/vue/troubleshooting.md
+++ b/versioned_docs/version-v7/vue/troubleshooting.md
@@ -31,13 +31,8 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr
   <ion-button>Hello World</ion-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonButton },
-  });
 </script>
 ```
 
@@ -97,19 +92,8 @@ In order for page transitions to work correctly, each page must have an `ion-pag
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonContent,
-      IonHeader,
-      IonPage,
-      IonTitle,
-      IonToolbar,
-    },
-  });
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/utility-functions.md b/versioned_docs/version-v7/vue/utility-functions.md
index 519b9265b12..f84ec85165c 100644
--- a/versioned_docs/version-v7/vue/utility-functions.md
+++ b/versioned_docs/version-v7/vue/utility-functions.md
@@ -16,23 +16,15 @@ Returns the Ionic router instance, containing API methods for navigating, custom
 
 ```js
 import { IonPage, useIonRouter } from '@ionic/vue';
-import { defineComponent } from 'vue';
 import { customAnimation } from '@/animations/customAnimation';
 
-export default defineComponent({
-  components: { IonPage },
-  setup() {
-    const router = useIonRouter();
-    const push = () => {
-      router.push('/page2', customAnimation);
-    };
-    const back = () => {
-      router.back(customAnimation);
-    };
-
-    return { push, back };
-  },
-});
+const router = useIonRouter();
+const push = () => {
+  router.push('/page2', customAnimation);
+};
+const back = () => {
+  router.back(customAnimation);
+};
 ```
 
 **Hardware back button on Android**
@@ -42,15 +34,9 @@ You may want to know if you are at the root page of the application when a user
 ```tsx
 import { useIonRouter } from '@ionic/vue';
 
-...
-
-export default {
-  setup() {
-    const ionRouter = useIonRouter();
-    if (ionRouter.canGoBack()) {
-      // Perform some action here
-    }
-  }
+const ionRouter = useIonRouter();
+if (ionRouter.canGoBack()) {
+  // Perform some action here
 }
 ```
 
@@ -152,29 +138,25 @@ See the [Keyboard Documentation](../developing/keyboard) for more information an
 Ionic Vue provides several lifecycle hooks for the `setup()` function to tap into the Ionic Framework page lifecycle.
 
 ```js
+<script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonPage },
-  setup() {
-    onIonViewDidEnter(() => {
-      console.log('Page did enter');
-    });
-
-    onIonViewDidLeave(() => {
-      console.log('Page did leave');
-    });
-
-    onIonViewWillEnter(() => {
-      console.log('Page will enter');
-    });
-
-    onIonViewWillLeave(() => {
-      console.log('Page will leave');
-    });
-  },
+
+onIonViewDidEnter(() => {
+  console.log('Page did enter');
+});
+
+onIonViewDidLeave(() => {
+  console.log('Page did leave');
+});
+
+onIonViewWillEnter(() => {
+  console.log('Page will enter');
+});
+
+onIonViewWillLeave(() => {
+  console.log('Page will leave');
 });
+</script>
 ```
 
 :::note
diff --git a/versioned_docs/version-v7/vue/virtual-scroll.md b/versioned_docs/version-v7/vue/virtual-scroll.md
index 24c90d7503b..21ebb70978d 100644
--- a/versioned_docs/version-v7/vue/virtual-scroll.md
+++ b/versioned_docs/version-v7/vue/virtual-scroll.md
@@ -89,24 +89,11 @@ The `RecycleScroller` component should be added inside of your `ion-content` com
   </ion-page>
 </template>
 
-<script>
-  import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+  import { ref } from 'vue';
   import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
 
-  export default defineComponent({
-    components: {
-      IonAvatar,
-      IonContent,
-      IonItem,
-      IonLabel,
-      IonPage,
-    },
-    setup() {
-      const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-
-      return { list };
-    },
-  });
+  const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 </script>
 ```