[Video] Using Vue 3 Beta with Ionic Firebase File Upload & Capacitor Plugins

Overview

Showing file upload using Composition API and Firebase Storage using the new Ionic Framework Web Components for Vue 3

I am using the latest beta release of the Ionic Integration with Vuejs Beta 3. I am using typescript in the example and relying heavily on the new pattern of Composition API when creating single file components.

Whats Covered In The Video

00:00 - Intro
00:10 - Overview of Application Functionality
02:35 - Focus on Firebase Storage Upload Composition API Hook
09:12 - Camera Upload Home Page
14:47 - List Uploads Pull To Refresh
16:24 - image Detail Params
16:50 - Get list of objects from the storage bucket
17:39 - Tabs Setup
19:41 - Image Detail Page

Source Code

aaronksaunders / ionic-vue3-sample-2

integrating firebase file upload and listing the files that were uploaded. Using firebase hook created with composition api

📺 IONIC VUE3 VIDEOS

Vue 3 Ionic Capacitor Sample App Using Firebase Upload Hook Composition API ( version 2 )

updated 9/4/2020

• Features: IonTabs, IonPage, IonToast, Capacitor Plugins Camera, GeoLocation, Firebase Storage, Page Routing, Page Parameters
• YOUTUBE VIDEO - https://youtu.be/y2nP5OPJ6tk

• PART ONE, Capacitor Camera & Geolocations
• PART TWO, Firebase Integration
• PART THREE, Firebase Integration, Authentication

Camera Working In PWA/Website/On Device

• see https://capacitor.ionicframework.com/docs/pwa-elements/

Using Typescript

• utilizing typescript in composition api functions
• utilizing typescript for all single file components

Using Firebase For File Upload To Storage

• updated firebase file upload composition api function to upload and list files is storage bucket
• You need to create your own firebase configuration file, to be placed in the hooks directory

// .env.firebase.ts
const FIREBASE_CONFIG = {
    apiKey: "zebaayDI9wPgYFLRUd_07WB8ZVHPWowFm2w",
    authDomain: "fffffff.firebaseapp.com",
    databaseURL: "https://fffffff.firebaseio.com",
    projectId: "fffffff",
    storageBucket: "fffffff.appspot.com",
    messagingSenderId: "87HPWowFm2w999",
    appId: "1:00000031465:web:53a3bHPWowFm2wc6a38",
    measurementId: "G-aSyDI9wPjgY",
  };
  
  export default FIREBASE_CONFIG 

Using Composition Pattern for Components

Versions

Ionic
   Ionic CLI

…

View on GitHub