docs(vue): update your first app pages

thetaPC · thetaPC · commit 397580174262 · 2025-10-28T16:46:37.000-07:00
diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
@@ -36,7 +36,7 @@ Highlights include:
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
-Find the [complete app code](github.com/ionic-team/photo-gallery-capacitor-vue) referenced in this guide on GitHub.
+Find the [complete app code](https://github.com/ionic-team/photo-gallery-capacitor-vue) referenced in this guide on GitHub.
 
 ## Download Required Tools
 
@@ -229,7 +229,7 @@ import {
 </script>
 ```
 
-Next, open `src/views/TabsPage.vue`. Change the label to “Photos” and the `ellipse` icon to `images` for the middle tab button.
+Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
 
 ```vue
 <template>
diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md
@@ -105,11 +105,11 @@ export const usePhotoGallery = () => {
 
     // CHANGE: Display the photo by reading into base64 format.
     for (const photo of photosInPreferences) {
-      const readFile = await Filesystem.readFile({
+      const file = await Filesystem.file({
         path: photo.filepath,
         directory: Directory.Data,
       });
-      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
 
     photos.value = photosInPreferences;
@@ -290,11 +290,11 @@ export const usePhotoGallery = () => {
     const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
     for (const photo of photosInPreferences) {
-      const readFile = await Filesystem.readFile({
+      const file = await Filesystem.file({
         path: photo.filepath,
         directory: Directory.Data,
       });
-      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
 
     photos.value = photosInPreferences;
diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md
@@ -37,9 +37,9 @@ import { Capacitor } from '@capacitor/core';
 
 ## Platform-specific Logic
 
-First, we’ll update the photo saving functionality to support mobile. In the `savePicture` method, check which platform the app is running on. If it’s “hybrid” (Capacitor, the native runtime), then read the photo file into base64 format using the `Filesystem`'s' `readFile()` method. Otherwise, use the same logic as before when running the app on the web.
+First, we’ll update the photo saving functionality to support mobile. In the `savePicture()` method, check which platform the app is running on. If it’s “hybrid” (Capacitor, the native runtime), then read the photo file into base64 format using the `Filesystem`'s' `readFile()` method. Otherwise, use the same logic as before when running the app on the web.
 
-Update `savePicture` to look like the following:
+Update `savePicture()` to look like the following:
 
 ```ts
 // CHANGE: Update the `savePicture()` method.
@@ -87,6 +87,7 @@ Then update `savePicture()` to look like the following:
 // CHANGE: Update `savePicture()` method.
 const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
   let base64Data: string | Blob;
+
   // CHANGE: Add platform check.
   // "hybrid" will detect mobile - iOS or Android
   if (isPlatform('hybrid')) {
diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/docs/vue/your-first-app/6-deploying-mobile.md
@@ -56,7 +56,7 @@ ionic cap sync
 To build an iOS app, you’ll need a Mac computer.
 :::
 
-Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by CocoaPods. Before running this app on an iOS device, there's a couple of steps to complete.
+Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete.
 
 First, run the Capacitor `open` command, which opens the native iOS project in Xcode:
 
diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.md
@@ -55,7 +55,7 @@ export const usePhotoGallery = () => {
     // Remove this photo from the Photos reference data array
     photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
 
-    // delete photo file from filesystem
+    // Delete photo file from filesystem
     const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
     await Filesystem.deleteFile({
       path: filename,
diff --git a/docs/vue/your-first-app/8-distribute.md b/docs/vue/your-first-app/8-distribute.md
@@ -72,7 +72,7 @@ To dive into more details on the steps to deploy a live update, as well as addit
 
 Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.
 
-Given a successful Package build, and iOS binary (`.ipa` or IPA) or and Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab.
+Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab.
 
 Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs.
 
@@ -102,8 +102,8 @@ For access to the ability to create a Native Configuration, you will need to be
 
 ## What’s Next?
 
-Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to you users devices!
+Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙
