Vue3 Firebase Composable Introduction w/ Ionic Framework

Firebase has come a long way and IMHO the API has gotten much easier to integrate into your applications even without third-party libraries. I was looking to do a video on integrating vuefire and after poking around for a while I decided to start with the basics first and then maybe later show a vuefire integration.

The whole project is a simple list/detail application in VueJS and Ionic Framework. We display the list, you can pull to refresh and you can click a list item to route to a detail page and load the user.

For the blog post, I am going over the firebaseService we create to access the data; the Ionic components are covered in the video linked below.

Setup the basic vue and firebase imports

Define the properties that are available to every instance of the service. Notice they are outside of the function definition.

Let’s define the composable and the initial properties that we will be returning

Getting All of the Users

To get all of the users from the firestore we can query the collection. This is the function to call using the collection const we created.

Since we will be calling the function multiple times, onMounted and it is also used when refreshing the database I have created a helper function.

Getting A Specific User

There are two ways to get a specific user, from the local array/cache users or to call the firestore database again.

If we want to get the data from the database

to make this function more accessible, we have added a helper function to

Wrap Up

This was just a quick overview of the code for the firebase composable; there are more details and an explanation in the @youtube video attached below.

If you have any questions, feel free to leave a comment here or on the video.

This is the source code for the project that I walk thru the process of developing a firebase composable to access collections and documents.

Ionic VueJS Video Playlist

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store