DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on

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


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

GitHub logo aaronksaunders / ionic-vue3-sample-2

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



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

Camera Working In PWA/Website/On Device

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
    apiKey: "zebaayDI9wPgYFLRUd_07WB8ZVHPWowFm2w",
    authDomain: "",
    databaseURL: "",
    projectId: "fffffff",
    storageBucket: "",
    messagingSenderId: "87HPWowFm2w999",
    appId: "1:00000031465:web:53a3bHPWowFm2wc6a38",
    measurementId: "G-aSyDI9wPjgY",
  export default FIREBASE_CONFIG 

Using Composition Pattern for Components


   Ionic CLI

Top comments (0)