docs(vue): run linter

Author: soundproofboot

docs/vue/your-first-app.md

@@ -102,8 +102,8 @@ After installation, open up the project in your code editor of choice.
 Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
 
 ```tsx
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
 import router from './router';
 
 import { IonicVue } from '@ionic/vue';
@@ -142,9 +142,7 @@ import './theme/variables.css';
 
 // CHANGE: Call the element loader before the createApp() call
 defineCustomElements(window);
-const app = createApp(App)
-  .use(IonicVue)
-  .use(router);
+const app = createApp(App).use(IonicVue).use(router);
 
 router.isReady().then(() => {
   app.mount('#app');
@@ -192,8 +190,8 @@ Open `/src/views/Tab2.vue`. We see:
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+  import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
@@ -226,9 +224,9 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-// CHANGE: Remove or comment out ExploreContainer import.
-// import ExploreContainer from '@/components/ExploreContainer.vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+  // CHANGE: Remove or comment out ExploreContainer import.
+  // import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
@@ -253,23 +251,23 @@ We'll replace it with a [floating action button](https://ionicframework.com/docs
 </template>
 
 <script setup lang="ts">
-// CHANGE: Add import from `ionicons/icons`
-import { camera, trash, close } from 'ionicons/icons';
-// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
-import {
-  IonPage,
-  IonHeader,
-  IonFab,
-  IonFabButton,
-  IonIcon,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonGrid,
-  IonRow,
-  IonCol,
-  IonImg,
-} from '@ionic/vue';
+  // CHANGE: Add import from `ionicons/icons`
+  import { camera, trash, close } from 'ionicons/icons';
+  // CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
+  import {
+    IonPage,
+    IonHeader,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonImg,
+  } from '@ionic/vue';
 </script>
 ```
 
@@ -302,21 +300,21 @@ Add the FAB to the bottom of the page. Use the camera image as the icon, and cal
 </template>
 
 <script setup lang="ts">
-import { camera, trash, close } from 'ionicons/icons';
-import {
-  IonPage,
-  IonHeader,
-  IonFab,
-  IonFabButton,
-  IonIcon,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonGrid,
-  IonRow,
-  IonCol,
-  IonImg,
-} from '@ionic/vue';
+  import { camera, trash, close } from 'ionicons/icons';
+  import {
+    IonPage,
+    IonHeader,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonImg,
+  } from '@ionic/vue';
 </script>
 ```
 
@@ -352,9 +350,9 @@ Next, open `src/views/TabsPage.vue`. Remove the `ellipse` icon from the import a
 </template>
 
 <script setup lang="ts">
-import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-// CHANGE: Update import by removing `ellipse` and adding `images`.
-import { images, square, triangle } from 'ionicons/icons';
+  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
+  // CHANGE: Update import by removing `ellipse` and adding `images`.
+  import { images, square, triangle } from 'ionicons/icons';
 </script>
 ```
 

docs/vue/your-first-app/2-taking-photos.md

@@ -80,26 +80,26 @@ Import `usePhotoGallery` and destructure the `takePhoto` function so we can use
 </template>
 
 <script setup lang="ts">
-import { camera, trash, close } from 'ionicons/icons';
-import {
-  IonPage,
-  IonHeader,
-  IonFab,
-  IonFabButton,
-  IonIcon,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonGrid,
-  IonRow,
-  IonCol,
-  IonImg,
-} from '@ionic/vue';
-// CHANGE: Add `usePhotoGallery` import.
-import { usePhotoGallery } from '@/composables/usePhotoGallery';
-
-// CHANGE: Destructure `takePhoto` from `usePhotoGallery().
-const { takePhoto } = usePhotoGallery();
+  import { camera, trash, close } from 'ionicons/icons';
+  import {
+    IonPage,
+    IonHeader,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonImg,
+  } from '@ionic/vue';
+  // CHANGE: Add `usePhotoGallery` import.
+  import { usePhotoGallery } from '@/composables/usePhotoGallery';
+
+  // CHANGE: Destructure `takePhoto` from `usePhotoGallery().
+  const { takePhoto } = usePhotoGallery();
 </script>
 ```
 
@@ -133,7 +133,7 @@ At the top of the `usePhotoGallery` function, define an array so we can store ea
 export const usePhotoGallery = () => {
   // CHANGE: Add the `photos` array.
   const photos = ref<UserPhoto[]>([]);
-  
+
   // other code
 };
 ```
@@ -169,7 +169,7 @@ export const usePhotoGallery = () => {
   // CHANGE: Update return statement to include `photos` array.
   return {
     photos,
-    takePhoto
+    takePhoto,
   };
 };
 ```
@@ -202,7 +202,7 @@ export const usePhotoGallery = () => {
 
   return {
     photos,
-    takePhoto
+    takePhoto,
   };
 };
 
@@ -220,26 +220,26 @@ Back in `Tab2Page.vue`, update the import statement to include the `UserPhoto` i
 </template>
 
 <script setup lang="ts">
-import { camera, trash, close } from 'ionicons/icons';
-import {
-  IonPage,
-  IonHeader,
-  IonFab,
-  IonFabButton,
-  IonIcon,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonGrid,
-  IonRow,
-  IonCol,
-  IonImg,
-} from '@ionic/vue';
-// CHANGE: Update import to include `UserPhoto` interface.
-import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
-
-// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
-const { photos, takePhoto } = usePhotoGallery();
+  import { camera, trash, close } from 'ionicons/icons';
+  import {
+    IonPage,
+    IonHeader,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonImg,
+  } from '@ionic/vue';
+  // CHANGE: Update import to include `UserPhoto` interface.
+  import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
+
+  // CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
+  const { photos, takePhoto } = usePhotoGallery();
 </script>
 ```
 
@@ -278,24 +278,24 @@ With the photo(s) stored into the main array we can now display the images on th
 </template>
 
 <script setup lang="ts">
-import { camera, trash, close } from 'ionicons/icons';
-import {
-  IonPage,
-  IonHeader,
-  IonFab,
-  IonFabButton,
-  IonIcon,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonGrid,
-  IonRow,
-  IonCol,
-  IonImg,
-} from '@ionic/vue';
-import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
-
-const { photos, takePhoto } = usePhotoGallery();
+  import { camera, trash, close } from 'ionicons/icons';
+  import {
+    IonPage,
+    IonHeader,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonImg,
+  } from '@ionic/vue';
+  import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
+
+  const { photos, takePhoto } = usePhotoGallery();
 </script>
 ```
 

docs/vue/your-first-app/3-saving-photos.md

@@ -34,11 +34,11 @@ export const usePhotoGallery = () => {
         resolve(reader.result);
       };
       reader.readAsDataURL(blob);
-  });
+    });
 
   return {
     photos,
-    takePhoto
+    takePhoto,
   };
 };
 
@@ -92,7 +92,7 @@ export const usePhotoGallery = () => {
 
   return {
     photos,
-    takePhoto
+    takePhoto,
   };
 };
 
@@ -137,7 +137,7 @@ export const usePhotoGallery = () => {
 
   return {
     photos,
-    takePhoto
+    takePhoto,
   };
 };
 
@@ -180,7 +180,7 @@ export const usePhotoGallery = () => {
         resolve(reader.result);
       };
       reader.readAsDataURL(blob);
-  });
+    });
 
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     // Fetch the photo, read as a blob, then convert to base64 format
@@ -204,7 +204,7 @@ export const usePhotoGallery = () => {
 
   return {
     photos,
-    takePhoto
+    takePhoto,
   };
 };