Using Ionic Framework VueJS, Firebase & Vuex For Image Diary

Learn to Build Mobile Apps With Ionic Framework, VueJS and Capacitor

Ratings 1.97 / 5.00

Using Ionic Framework VueJS, Firebase & Vuex For Image Diary

What You Will Learn!

Get started with Ionic Framework VueJS & Capacitor
Learn To Use Vuex
Integrating Ionic VueJS Application With Firebase
Create Authentication Flow with Private Pages in Your Application
Deploy You Application on Native Device
Us Ionic Capacitor Plugins in Your Application

Description

The new Ionic Framework VueJS Web Components are a great way to leverage your javascript skills with VueJS to build professional looking Mobile Applications and PWAs efficiently.

Vue3 and Vuex 4 are the latest releases and we hope that this video tutorial will expose you to the important features and patterns of the release and start you on the journey to build something amazing

In this video tutorial, you will build an Image Diary mobile application to deploy on Apple IOS devices and Android devices that focuses on uploading photos to firebase cloud storage along with additional data about the image that will be saved in Firebase Firestore.

The video tutorial covers some of the basic Ionic Framework Components you might need for your first app; IonAlert, IonToast, IonList, IonItem, IonModal.

It also covers using vue-router with protected routes, creating an authentication flow with VueJS, separation of concerns by creating a separate Firebase Service API that is integrated with Vuex

We use this functionality as a way to demonstrate the use of Ionic Framework with VueJS and the official state management library for VueJS, Vuex. In vuex, we demonstrate actions, mutations, namespace, and more

We have also decided to use typescript and follow the Composition API approach to building Single File Components in Vue3, ie using setup function instead of Options API Approach.