docs(vue): update all script syntax to use setup (#4242)

- Updates all v8 playgrounds to use script setup syntax
- Updates all v7 playgrounds to use script setup syntax
- Updates all references to Vue code in the guide & API docs to use script setup syntax

---------

Co-authored-by: Roger! <icarus.gk@gmail.com>
Co-authored-by: Shawn Taylor <shawn@mapsandapps.net>
Co-authored-by: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

Author: 4 people

_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 setup lang="ts">
   import { <%= pascalComponent %> } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      <%= pascalComponent %>,
-    },
-  });
 </script>
 <% if (css){ -%>
 

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 />
+<Slots />

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

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>

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

docs/vue/lifecycle.md

@@ -22,60 +22,51 @@ 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
 
 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