---
title: "Using Firebase Realtime Database in Astro with Vue"
description: "How to use Firebase Realtime Database in Astro application using Vue?"
source: "https://www.launchfa.st/blog/vue-astro-firebase-realtime-database"
author: "Rishi Raj Jain"
created_at: 2024-04-14T00:00:00.000Z
updated_at: 2026-07-02T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
In this guide, you will learn how to use Firebase Realtime Database 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 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later
- A [Firebase](https://console.firebase.google.com) account
## Table Of Contents
- [Create a new Astro application](#create-a-new-astro-application)
- [Integrate Vue in your Astro project](#integrate-vue-in-your-astro-project)
- [Integrate Firebase Realtime Database in your Astro project](#integrate-firebase-realtime-database-in-your-astro-project)
- [Install VueUse SDK for Firebase Realtime Database](#install-vueuse-sdk-for-firebase-realtime-database)
- [Instantiate Firebase Realtime Database client](#instantiate-firebase-realtime-database-client)
- [Create the index route](#create-the-index-route)
- [Build and Test your Astro application locally](#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:
```bash
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 you 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:
```bash
cd my-app
npm run dev
```
The app should be running on [localhost:4321](http://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:
```bash
npx astro add vue
```
`npx` allows us to execute npm package binaries without having to first install them globally.
When prompted, choose the following:
- `Yes` when prompted whether to install the Vue dependencies.
- `Yes` when prompted whether to make changes to the 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:
```json {3-8}
{
"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:
```bash
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.
```json
{
"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 export a reference to the Firebase Realtime Database, create a file `firebase.ts` in the `src` directory with the following code:
```ts
// File: src/firebase.ts
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:
```vue
{{ todo }}
```
The code above does the following:
- Defines a template with an unordered list (`
`) 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:
```astro
---
// File: src/pages/index.astro
import App from "@/App.vue"; // [!code ++] // [!code focus]
---
Astro // [!code ++] // [!code focus]
```
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:
```bash
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](https://twitter.com/direct_messages/create/rishi_raj_jain_).
In this guide, you will learn how to use Firebase Realtime Database 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 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later
- A [Firebase](https://console.firebase.google.com) account
## Table Of Contents
- [Create a new Astro application](#create-a-new-astro-application)
- [Integrate Vue in your Astro project](#integrate-vue-in-your-astro-project)
- [Integrate Firebase Realtime Database in your Astro project](#integrate-firebase-realtime-database-in-your-astro-project)
- [Install VueUse SDK for Firebase Realtime Database](#install-vueuse-sdk-for-firebase-realtime-database)
- [Instantiate Firebase Realtime Database client](#instantiate-firebase-realtime-database-client)
- [Create the index route](#create-the-index-route)
- [Build and Test your Astro application locally](#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:
```bash
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 you 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:
```bash
cd my-app
npm run dev
```
The app should be running on [localhost:4321](http://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:
```bash
npx astro add vue
```
`npx` allows us to execute npm package binaries without having to first install them globally.
When prompted, choose the following:
- `Yes` when prompted whether to install the Vue dependencies.
- `Yes` when prompted whether to make changes to the 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:
```json {3-8}
{
"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:
```bash
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.
```json
{
"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 export a reference to the Firebase Realtime Database, create a file `firebase.ts` in the `src` directory with the following code:
```ts
// File: src/firebase.ts
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:
```vue