October 8, 2020
  • Tutorials
  • Capacitor
  • Ionic
  • Vue

New Tutorial: Your First Ionic Vue App

Matt Netkow

Following the news that the Ionic Vue release candidate has shipped, I’m excited to share a new tutorial: “Your First Ionic App” for Ionic Vue!

If you’ve already tried the Angular or React version of the Build Your First App tutorials, you’ll feel right at home with this new guide. It walks you through the fundamentals of Ionic app development by creating a real app step by step. After completing the tutorial, you’ll transform the Tabs starter app into an interactive photo gallery that runs on the web, iOS, and Android – all from one codebase:

Try the PWA version of the app for yourself here.

What We’ll Build

The Photo Gallery app includes the ability to take photos with your device’s camera, display them in a grid, and store them permanently on the device.

Highlights include:

  • A Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework UI components.
  • Deployed as a native iOS and Android mobile app using Capacitor, Ionic’s official native app runtime.
  • Photo Gallery functionality powered by the Capacitor Camera, Filesystem, and Storage APIs.

It’s Gonna Be Vue-tiful

My favorite thing about this tutorial is the coverage of Vue 3 concepts, such as the Composition API, reactive references, and lifecycle hooks, as well as modern JavaScript features like destructuring, the rest/spread operator, and ESModules.

For example, in order to save the photos to permanent storage, the Vue 3 watch function is used to watch the photos array. Whenever the array is modified (in this case, capturing or deleting photos), the cachePhotos function is triggered. Not only do we get to reuse code, but it guarantees that photo data is always saved – even if the app user closes or switches to a different app:

// Use the Capacitor Storage API to cache photos
const cachePhotos = () => {
  Storage.set({
    key: "photos",
    value: JSON.stringify(photos.value)
  });
}

// Anytime the photos array is modified, cache photo data
watch(photos, cachePhotos);

So, bottom line: if you’re looking for a practical, hands-on tutorial, this is the one.

Try the Tutorial

Ready to learn Ionic Vue? Follow the tutorial here and start building your first Ionic app!


Matt Netkow