[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 )

Name: [Video] Using Vue 3 Beta with Ionic Firebase File Upload & Capacitor Plugins
Rating: 1.3 (3065 reviews)
Author: aaronksaunders

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