Vue3 Firebase Composable Introduction w/ Ionic Framework

Image for post
Image for post

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

// FIREBASE
import firebase from "firebase/app";
import "firebase/firestore";
const db = firebase
.initializeApp({ projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID })
.firestore();

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

// hold the users retrieved from the database
const users = ref<any>([]);
// any error from firebase call
const error = ref<any>(null);
// when we are loading
const loading = ref<any>(false);

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

  return {
//properties
users,
loading,
error,
};
}

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.

  // helper
const loadUsers = async () => {
users.value = await getCollectionData(userCollection);
};
// when initialized, get all the users
onMounted(async () => {
await loadUsers();
});
return {
// functions
loadUsers,
//properties
users,
loading,
error,
};
};

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

Written by

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

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