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

import { onMounted, ref } from "vue";

// 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.

// define the user collection once
const userCollection = db.collection("users");

// 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

export default () => {

  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.

  const getCollectionData = async (collection: any) => {
    loading.value = true;
    try {
      const querySnapshot = await collection.get();
      const results = querySnapshot.docs.map((doc: any) => {
        return { ...doc.data(), id: doc.id };
      });
      loading.value = false;
      return results;
    } catch (e) {
      error.value = e;
      loading.value = false;
    }
  };

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.

export default () => {
  const getCollectionData = async (collection: any) => {
    loading.value = true;
    try {
      const querySnapshot = await collection.get();
      const results = querySnapshot.docs.map((doc: any) => {
        return { ...doc.data(), id: doc.id };
      });
      loading.value = false;
      return results;
    } catch (e) {
      error.value = e;
      loading.value = false;
    }
  };

  // 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.

  /**
   * get the user from the local array
   * @param userId
   */
  const getLocalUser = (userId: string) => {
    return users.value.find((u: any) => u.id === userId);
  };

If we want to get the data from the database

  /**
   * get the document from firebase and not local users
   * 
   * @param collection 
   * @param id 
   */
  const getCollectionDoc = async (collection: any, id: string) => {
    loading.value = true;
    try {
      const doc = await collection.doc(id).get();
      loading.value = false;
      return { ...doc.data(), id: doc.id };
    } catch (e) {
      error.value = e;
      loading.value = false;
    }
  };

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

getUser : (id: string) => getCollectionDoc(userCollection,id),

Wrap Up

This was just a quick overview of the code for the firebase composable; there is more detail and 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.

Watch Me Code in the youtube video.

Full Project Source Code

aaronksaunders / vue3-firebase-composable1

vue3 composition api with firebase and ionic framework. implementing list and detail page along with pull to refresh

Vue3 Firebase Composable Introduction w/ Ionic Framework

Name: Vue3 Firebase Composable Introduction w/ Ionic Framework
Rating: 1.7 (564 reviews)
Author: aaronksaunders

Firebase has come a long way and IMHO the API has gotten much easier to integrate into your applications even without third-party libraries.

This is the source code for the project that I walkthru the process of developing a firebase composable to access collections and documents. Watch Me Code in the youtube video.

https://www.youtube.com/watch?v=-pFu52HCd20

Setting Firebase Configuration

This project requires an .env file in the root directory of the project containing the project id for your firebase project

VUE_APP_FIREBASE_PROJECT_ID=xxxx-yyyyy-dev

Supporting the Work On YouTube

Please checkout the video and like and subscribe to the channel. Also if you appreciate the work, please support the efforts here.

View on GitHub