Search docs/

Rapid App Development with Live Reload



Live Reload


We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins. Since we need to run native plugin code on a device in order to verify that it works, having a way to quickly write code, build and deploy it, then test it is crucial to keeping up our development speed.


$ ionic cap run ios -l --external

$ ionic cap run android -l --external


Deleting Photos

With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open Tab2.vue then import the actionSheetController. We'll display an IonActionSheet with the option to delete a photo:

import { actionSheetController, IonPage, IonHeader, IonFab, IonFabButton, 
         IonIcon, IonToolbar, IonTitle, IonContent, IonImg, IonGrid, 
         IonRow, IonCol } from '@ionic/vue';
// other imports

Next, reference the deletePhoto function, which we'll create soon:

setup() {}
  const { photos, takePhoto, deletePhoto } = usePhotoGallery();

When a user clicks/taps on an image, we will show the action sheet. Add a click handler to the <ion-img> element:

<ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>

Next, within setup(), call the create function to open a dialog with the option to either delete the selected photo or cancel (close) the dialog:

const showActionSheet = async (photo: Photo) => {
  const actionSheet = await actionSheetController.create({
    header: 'Photos',
    buttons: [{
      text: 'Delete',
      role: 'destructive',
      icon: trash,
      handler: () => {
    }}, {
      text: 'Cancel',
      icon: close,
      role: 'cancel',
      handler: () => {
        // Nothing to do, action sheet is automatically closed
  await actionSheet.present();

Next, return the showActionSheet function:

return {
  camera, trash, close

Next, we need to implement the deletePhoto method in the usePhotoGallery function. Open the file then add:

const deletePhoto = async (photo: Photo) => {
  // Remove this photo from the Photos reference data array
  photos.value = photos.value.filter(p => p.filepath !== photo.filepath);

  // delete photo file from filesystem
  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
  await Filesystem.deleteFile({
    path: filename,
    directory: FilesystemDirectory.Data

The selected photo is removed from the photos array first, then we delete the photo file using the Filesystem API.

Remember that removing the photo from the photos array triggers the cachePhotos function for us automatically:

const cachePhotos = () => {
    value: JSON.stringify(photos.value)

watch(photos, cachePhotos);

Finally, return the deletePhoto function:

return {

Save this file, then tap on a photo again and choose the "Delete" option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪

What’s Next?

Congratulations! You created a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android.

There are many paths to follow from here. Try adding another Ionic UI component to the app, or more native functionality. The sky’s the limit.

Happy app building! 💙

Deploying Mobile