Using Firebase Realtime Database in Astro with Vue: A Step-by-Step Guide

In this guide, you will learn how to use Firebase Realtime Database users in an Astro application using Vue. You will go through the process of setting up a new Astro project, enabling server-side and client-side hydration of Vue 3, and integrating Firebase Realtime Database seamlessly.

Prerequisites

You’ll need the following:

• Node.js 18 or later
• A Firebase account

Table Of Contents

• Create a new Astro application
• Integrate Vue in your Astro project
• Integrate Firebase Realtime Database in your Astro project
  • Install VueUse SDK for Firebase Realtime Database
  • Instantiate Firebase Realtime Database client
  • Create the index route
• Build and Test your Astro application locally

Create a new Astro application

Let’s get started by creating a new Astro project. Execute the following command:

npm create astro@latest my-app

npm create astro is the recommended way to scaffold an Astro project quickly.

When prompted, choose:

• Empty when prompted on how to start the new project.
• Yes when prompted if plan to write Typescript.
• Strict when prompted how strict Typescript should be.
• Yes when prompted to install dependencies.
• Yes when prompted to initialize a git repository.

Once that’s done, you can move into the project directory and start the app:

cd my-app
npm run dev

The app should be running on localhost:4321.

Now, let’s move on to integrate Vue in your Astro application.

Integrate Vue in your Astro project

To create dynamic user interfaces, you will use Vue in your Astro project. Execute the following command:

npx astro add vue

npx allows us to execute npm packages binaries without having to first install it globally.

When prompted, choose the following:

• Yes when prompted whether to install the Vue dependencies.
• Yes when prompted whether to make changes to Astro configuration file.
• Yes when prompted whether to make changes to tsconfig.json file.

Now, to save the hassle of creating relative paths for imports, update tsconfig.json with the following:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Integrate Firebase Realtime Database in your Astro project

Install VueUse SDK for Firebase Realtime Database

Execute the command below to install the necessary package for using Firebase Realtime Database:

npm install @vueuse/firebase firebase

The command installs the following library:

• @vueuse/firebase: A package that enables the real-time bindings for Firebase..
• firebase: A package to interact with Firebase.

Instantiate Firebase Realtime Database client

To establish a connection with your Firebase instance, create a firebase.json in the src directory with the service account key file for Firebase. Make sure the databaseURL value is present, and points to your Firebase Realtime Database URL.

{
  "type": "service_account",
  "project_id": "...",
  "private_key_id": "...",
  "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
  "client_email": "...@....iam.gserviceaccount.com",
  "client_id": "...",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/.../....iam.gserviceaccount.com",
  "universe_domain": "googleapis.com",
  "databaseURL": "https://...-default-rtdb.firebaseio.com"
}

To set up a Firebase app and exports a reference to the Firebase Realtime Database, create a file firebase.ts in the src directory with the following code:

import { initializeApp } from "firebase/app";
import firebaseConfig from "./firebase.json";
import { getDatabase } from "firebase/database";

const app = initializeApp(firebaseConfig);

export default getDatabase(app);

The code above does the following:

• Imports the initializeApp function to initialize a Firebase app.
• Imports the Firebase configuration object from firebase.json.
• Imports the getDatabase function to get a reference to the Firebase Realtime Database.
• Calls initializeApp with the firebaseConfig object to initialize the Firebase app.
• Exports the reference to the Firebase Realtime Database. This exported reference can be used to interact with the Firebase Realtime Database from other parts of the application.

Create the index route

Create an App.vue inside the src directory with the following code:

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

<script setup lang="ts">
// File: src/App.vue

import db from "@/firebase";
import { ref } from "firebase/database";
import { useRTDB } from "@vueuse/firebase/useRTDB";

const todos = useRTDB(ref(db, "todos"), { autoDispose: false });
</script>

The code above does the following:

• Defines a template with an unordered list (<ul>) to display a list of todos.
• Imports the Firebase Realtime Database instance from the @/firebase module.
• Imports the ref function from Firebase to create a reference to a specific location in the Firebase Realtime Database.
• Imports the useRTDB function from @vueuse/firebase to bind the todos variable to real-time updates from the Firebase Realtime Database.
• Configures useRTDB to listen for changes at the todos location in the database, and sets autoDispose to false to prevent automatic disposal of the real-time binding when the component is unmounted.

To use this Vue component on the home page of your application, make the following changes in src/pages/index.astro file:

---
import App from "@/App.vue"; // [!code ++] // [!code focus]
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <App client:load /> // [!code ++] // [!code focus]
  </body>
</html>

The changes above import the App Vue component and use Astro’s client:load directive to make sure that this Vue component is hydrated immediately on the page.

Build and Test your Astro application locally

To test the application, prepare a build and run the preview server using the command below:

npm run build && node ./dist/server/entry.mjs

Conclusion

In this guide, you learned how to use Firebase Realtime Database with Vue in an Astro application.

If you have any questions or comments, feel free to reach out to me on Twitter.