Building a better VueFire

VueFire came to life back when Evan You (then a Googler) published the first version all the way back in 2016. Since 2016, the Vue and Firebase worlds have changed: Vue 3, Firebase v9, Vite, and of course server tools like Nuxt. Needless to say, creating and maintaining a Vue and Firebase library that supports all aspects of the underlying libraries is a dedicated job. So that’s exactly what we did.

We have contracted out to Vue core team member Eduardo San Martin Morote to build the best Firebase + Vue experience we can imagine.

VueFire

Idiomatic composables for realtime data and other Firebase services.

https://vuefire.vuejs.org/

Today we are excited to announce our partnership with Eduardo and our plans for VueFire.

1. A new VueFire plugin to simplify the initialization process.
2. Full support for the Vue 3 Composition API while maintaining compatibility for the Options API.
3. Authentication and Router integration to easily guard and manage authenticated routes.
4. A dedicated Nuxt Module to handle data fetching and authentication.
5. Support for the majority of Firebase services such as Storage, Functions, Analytics, and AppCheck.
6. Streamlined Nuxt deployments to Firebase Hosting.
7. A brand new docs site and video course.

Everything we will discuss in this blog post is either in an alpha state or a roadmap item for the future. We hope that you’ll be just as excited as we are. If you’re interested in trying the current version, we have a docs site and an alpha version on npm.

Let’s learn all about it.

When configuring Firebase within JavaScript frameworks there can sometimes be questions about when to initialize the Firebase App. We wanted to make that easy within VueFire so we integrated with Vue’s Plugin system.

VueFire now has a new plugin that makes it easy to provide a Firebase App instance to a Vue app.

import { createApp } from 'vue';
import { VueFire, VueFireAuth } from 'vuefire';
import { getApp } from 'firebase/app';

const app = createApp(App)
app.use(VueFire, {
  firebaseApp: getApp(),
  modules: [
    VueFireAuth(),
  ],
});
app.mount('#app');

The plugin has options for the Firebase App instance and the modules for the Firebase services you’re using. These VueFire specific modules also set up common tasks such as wiring up the event listener for authentication state.

The goal of this plugin is to help you write idiomatic Vue code instead of spending time wiring up Firebase APIs to common Vue APIs.

Oh, and speaking of Vue APIs…

Vue 3 introduced the Composition API, making it easy to share complex logic across components. Logic is encapsulated in a composable. Composables are a great fit for the vast majority of Firebase APIs because they can take a reference as an argument and return a reactive stream of data.

<script setup>
import { useCollection } from 'vuefire';
import { collection } from 'firebase/firestore';

// This is a composable. It only needs a ref to manage 
// the subscription.
const todos = useCollection(collection(db, 'todos'));
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
     <span>{{ todo.text }}</span>
    </li>
  </ul>
</template>

You might notice a few things about the sample of code above. First of all, there’s no callback or subscription to manage within the useCollection() composable. Second of all, the todos variable appears to be synchronous but the values are updated asynchronously.

This is a core principle of VueFire: reactive data without the asynchronous hassle. VueFire integrates Firebase’s realtime and asynchronous APIs into the Vue reactivity API to get idiomatic composables. These composables return reactive pieces of data that are always up to date.

VueFire will support back to Vue 2.7 “Naruto” which provides support for both the Composition and Options APIs within Vue 2 sites.

The Options API is configured within the VueFire plugin.

import { VueFire, VueFireFirestoreOptionsAPI, VueFireDatabaseOptionsAPI } from 'vuefire'

app.use(VueFire, {
  modules: [
    VueFireFirestoreOptionsAPI(),
    VueFireDatabaseOptionsAPI(),
  ]
})

After the plugin set up you can use VueFire within your component’s options.

import { collection } from 'firebase/firestore'

export default {
  data() {
    return {
      documents: [],
    }
  },

  firestore: {
    documents: collection(db, 'documents'),
  },
}

We want to provide both APIs to make it easy to maintain existing apps or move to the Composition API in the future. The Composition API has many advantages when used with Firebase APIs, especially in terms of Authentication.

<script setup>
import { useCurrentUser } from 'vuefire';
const user = useCurrentUser();
</script>
<template>
  <div v-if="user">
    You're logged in as {{user.displayName}}
  </div>
</template>

The useCurrentUser() composable reacts to the current authentication state and the template will rerender when a user logs in or out.

What if you want to resolve the authentication state before activating a route? Well, in the next generation of VueFire we have plans just for that.

Authentication and Routing logic are always paired together because authentication acts as the gatekeeper for protected routes. Eduardo is the author of vue-router, so we leaned on his expertise to make a great experience.

There are many ways to protect routes using VueFire. One of our favorites is by using the route’s meta field and checking the field within the router guard.

import { createRouter } from 'vue-router';
import { getCurrentUser } from 'vuefire';

const router = createRouter({
  routes: [
     { path: '/', component: Home },
     { path: '/auth-only', component: Profile, meta: { isProtected: true } },
  ],
})

async function authGuard(to) {
  // Ensures the user is initialized 
  const user = await getCurrentUser()
  if(to.meta.isProtected && !user) {
    // Redirect to a login page
    return '/login';
  }
}

router.beforeEach(authGuard);

This code snippet allows you to declare whether a route isProtected without having to modify the authentication code as more routes are added.

This is just the start of our integration with the router and we hope to make it easier in the future and provide idiomatic ways to resolve data for routes.

Nuxt is an amazing tool for server side rendering. When using Firebase with server rendered tools, there are a few things to consider in terms of data hydration and authentication. There has to be communication between the server and the browser so they are aware of what data has already been downloaded and what user is authenticated.

This can lead to a lot of tedious glue code that can be difficult to manage across library updates… and that’s exactly what we plan to fix.

The Nuxt module is still in development but we plan on combining VueFire with Nuxt APIs like onServerPrefetch() for easier data fetching on the server and client side hydration. There is already a lot of work in progress here, so stay tuned!

The previous version of VueFire only supported Firestore and the Realtime Database. This version is going to be far more comprehensive and will provide support for the majority of Firebase services. The library is in alpha today, but it has support for Firestore, Realtime Database, Auth, AppCheck, and Storage.

Our documentation is still a work in progress, but more on that in just a bit.

Deploying Nuxt to Firebase Hosting is already easy with Nitro’s Firebase preset. However, we wanted to make it even easier.

At this year’s Firebase Summit we announced one command deployments for meta-frameworks like Angular Universal and Next.js. With only using firebase deploy the Firebase CLI will detect the framework, run the build, generate the Cloud Function code, generate the proper configuration, and manage the entire deployment.

Soon we’ll be adding support for Nuxt and VueFire will be optimized for that experience with the upcoming Nuxt module.

We are incredibly excited about this integration, so stay tuned for more.

A new library deserves a new docs site. Today you can visit the work in progress site at https://vuefire.vuejs.org/.

Soon this library will have detailed documentation of each module within VueFire and a cookbook of common tasks and techniques. Once the library reaches a stable state we plan on recording a video course that will showcase how to build a complex site with Firebase, Vue, and Nuxt.

Give it a try today

The library is in an alpha state but we are eager for you to give a try and tell us what you think. It’s available on npm and we’re happy to answer any questions and issues on StackOverflow, Reddit, or GitHub.

Vue and Firebase are an amazing combination and we are so excited about the future of VueFire.