useFirebase() with Vue3 and Vite

Last Friday I discovered that Evan You haven't slept and produced a new amazing tool - vite which starts a local dev server in less than a second! What a miracle! I think this is a beginning of the end of the Webpack era, where you had to wait around one minute just to kick-start a new project!

I started playing around with vue-composition-api already for a while with Nuxt.js and Firebase and came up with some wrappers to trigger auth and access collections. I thought it would be a good start for my first open source project - firebase plugin for vue3 - vca-firebase

Here is how you can use it:

<template>
  <div>UID: {{ uid }}</div>
  <pre>{{ accounts }}</pre>
  <button @click="signInWithGoogle">Sign In with Google</button>
  <button @click="createAccount({ name: 'Join' })">Add</button>
</template>

<script>
  import { initFirebase, useAuth, useCollection, useDoc } from "vca-firebase";
  import firebaseConfig from "./firebase.config.js";

  export default {
    setup() {
      initFirebase(firebaseConfig);

      const { uid, signInWithGoogle } = useAuth();
      const { docs: accounts } = useCollection("accounts");
      const { create: createAccount } = useDoc("accounts");

      return {
        signInWithGoogle,
        uid,
        accounts,
        createAccount,
      };
    },
  };
</script>

You need just to initFirebase once, which will trigger provide method and create a Symbol(), which you will inject with use-methods anywhere in the app. You might want to see source code to have an idea how to create your own plugin.

Collection will be initialised only once and listener will update a state object with any changes made to documents in those collections.

Please let me know if it works for you and support me with a star to my repo. Feel free to open issues with bug reports and feature requests.

Comments

[Champ]

This looks promising. It would be nice if you explain more on how to implement it.

Btw, how is it different from using the normal APIs from firebase?

For instance, when we want to create a doc in a collection, we can write this JS code.

firestore.collection('accounts').doc(uid).set({ name: 'Join' });

Thank you.