Merge branch 'main' into docs/quickstart-updates

Author: brandyscarney

docs/vue/build-options.md

@@ -28,7 +28,7 @@ Also note that locally registered components are not available in subcomponents.
 
 Let's take a look at how local component registration works:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -38,8 +38,8 @@ Let's take a look at how local component registration works:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonPage } from '@ionic/vue';
-  import SubComponent from '@/components/SubComponent.vue';
+import { IonContent, IonPage } from '@ionic/vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -70,7 +70,7 @@ app.component('ion-page', IonPage);
 
 **MyComponent.vue**
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -80,7 +80,7 @@ app.component('ion-page', IonPage);
 </template>
 
 <script setup lang="ts">
-  import SubComponent from '@/components/SubComponent.vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 

docs/vue/lifecycle.md

@@ -21,7 +21,7 @@ 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
+```vue
 <script setup lang="ts">
 import { IonPage } from '@ionic/vue';
 
@@ -47,7 +47,7 @@ const ionViewWillLeave = () => {
 
 These lifecycles can also be expressed using Vue 3's Composition API:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
 

docs/vue/navigation.md

@@ -103,7 +103,7 @@ Say we start on the `home` route, and we want to add a button that takes us to t
 
 We can also programmatically navigate in our app by using the router API:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -113,10 +113,10 @@ We can also programmatically navigate in our app by using the router API:
 </template>
 
 <script setup lang="ts">
-  import { IonButton, IonContent, IonPage } from '@ionic/vue';
-  import { useRouter } from 'vue-router';
+import { IonButton, IonContent, IonPage } from '@ionic/vue';
+import { useRouter } from 'vue-router';
 
-  const router = useRouter();
+const router = useRouter();
 </script>
 ```
 
@@ -364,7 +364,7 @@ Here, our `tabs` path loads a `Tabs` component. We provide each tab as a route o
 
 Let's start by taking a look at our `Tabs` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-tabs>
@@ -390,8 +390,8 @@ Let's start by taking a look at our `Tabs` component:
 </template>
 
 <script setup lang="ts">
-  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-  import { ellipse, square, triangle } from 'ionicons/icons';
+import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
+import { ellipse, square, triangle } from 'ionicons/icons';
 </script>
 ```
 
@@ -494,7 +494,7 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -507,7 +507,7 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -550,7 +550,7 @@ Notice that we have now added `:id` to the end of our `detail` path string. URL
 
 Let's look at how to use it in our component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -564,11 +564,11 @@ Let's look at how to use it in our component:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { useRoute } from 'vue-router';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { useRoute } from 'vue-router';
 
-  const route = useRoute();
-  const { id } = route.params;
+const route = useRoute();
+const { id } = route.params;
 </script>
 ```
 

docs/vue/performance.md

@@ -11,7 +11,7 @@ When using `v-for` with Ionic components, we recommend using Vue's `key` attribu
 
 By using `key` you can provide a stable identity for each loop element so Vue can track insertions and deletions within the iterator. Below is an example of how to use `key`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -23,14 +23,14 @@ By using `key` you can provide a stable identity for each loop element so Vue ca
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
-  import { ref } from 'vue';
-
-  const items = ref([
-    { id: 0, value: 'Item 0' },
-    { id: 1, value: 'Item 1' },
-    ...
-  ]);
+import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+import { ref } from 'vue';
+
+const items = ref([
+  { id: 0, value: 'Item 0' },
+  { id: 1, value: 'Item 1' },
+  ...
+]);
 </script>
 ```