---
title: "Uso de Firebase Realtime Database en Astro con Vue"
description: "¿Cómo utilizar Firebase Realtime Database en la aplicación Astro usando Vue?"
source: "https://www.launchfa.st/es/blog/vue-astro-firebase-realtime-database"
author: "Rishi Raj Jain"
created_at: 2024-04-14T00: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.

<img width="1600" height="900" alt="Using Firebase Realtime Database in Astro with Vue" decoding="async" loading="eager" class="mt-4 border rounded-sm bg-cover bg-center bg-no-repeat transform will-change-auto" src="https://ik.imagekit.io/vjeqenuhn/launchfast-website/vue-astro-firebase-realtime-database" />

En esta guía, aprenderá cómo utilizar los usuarios de Firebase Realtime Database en una aplicación Astro usando Vue. Pasará por el proceso de configuración de un nuevo proyecto Astro, habilitando la hidratación del lado del servidor y del lado cliente de Vue 3 e integrando Firebase. Base de datos en tiempo real sin problemas

## Requisitos previos

Necesitará lo siguiente:

- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
- Una cuenta de [Firebase](https://consolefirebase.google.com)

## Tabla de contenido

- [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro)
- [Integra Vue en tu proyecto Astro](#integra-vue-en-tu-proyecto-astro)
- [Integra Firebase Realtime Database en tu proyecto Astro](#integrate-firebase-realtime-database-in-your-astro-project)
  - [Instalar VueUse SDK para Firebase Realtime Database](#install-vueuse-sdk-for-firebase-realtime-database)
  - [Crear una instancia del cliente de base de datos en tiempo real de Firebase] (#instanciar-firebase-realtime-database-client)
  - [Crear la ruta índice](#crear-la-ruta-índice)
- [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)

## Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

```bash
npm create astro@latest my-app
```

`npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

- `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

```bash
cd my-app
npm run dev
```

La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/)

Ahora, pasemos a integrar Vue en su aplicación Astro.

## Integra Vue en tu proyecto Astro

Para crear interfaces de usuario dinámicas, utilizará Vue en su proyecto Astro. Ejecute el siguiente comando:

```bash
npx astro add vue
```

`npx` nos permite ejecutar paquetes binarios npm sin tener que instalarlo primero globalmente

Cuando se le solicite, elija lo siguiente:

- `Sí` cuando se le pregunta si desea instalar las dependencias de Vue
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo `tsconfigjson`

Ahora, para evitar la molestia de crear rutas relativas para las importaciones, actualice `tsconfigjson` con lo siguiente:

```json {3-8}
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

## Integre Firebase Realtime Database en su proyecto Astro

### Instale el SDK de VueUse para la base de datos en tiempo real de Firebase

Ejecute el siguiente comando para instalar el paquete necesario para usar Firebase Realtime Database:

```bash
npm install @vueuse/firebase firebase
```

El comando instala la siguiente biblioteca:

- `@vueuse/firebase`: un paquete que permite enlaces en tiempo real para Firebase
- `firebase`: Un paquete para interactuar con Firebase

### Crear una instancia del cliente de base de datos en tiempo real de Firebase

Para establecer una conexión con su instancia de Firebase, cree un `firebasejson` en el directorio `src` con el archivo de clave de cuenta de servicio para Firebase. Asegúrese de que el valor `databaseURL` esté presente y apunte a la URL de su base de datos en tiempo real de Firebase.

```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"
}
```

Para configurar una aplicación Firebase y exportar una referencia a Firebase Realtime Database, cree un archivo `firebasets` en el directorio `src` con el siguiente código:

```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);
```

El código anterior hace lo siguiente:

- Importa la función `initializeApp` para inicializar una aplicación de Firebase
- Importa el objeto de configuración de Firebase desde **firebasejson**
- Importa la función `getDatabase` para obtener una referencia a Firebase Realtime Database
- Llama a `initializeApp` con el objeto firebaseConfig para inicializar la aplicación Firebase.
- Exporta la referencia a Firebase Realtime Database. Esta referencia exportada se puede utilizar para interactuar con Firebase Realtime Database desde otras partes de la aplicación.

### Crear la ruta de índice

Crear una `aplicaciónvue` dentro del directorio `src` con el siguiente código:

```vue
<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>
```

El código anterior hace lo siguiente:

- Define una plantilla con una lista desordenada (`<template>`) para mostrar una lista de todos
- Importa la instancia de Firebase Realtime Database desde el módulo `@/firebase`
- Importa la función `ref` de Firebase para crear una referencia a una ubicación específica en Firebase Realtime Database
- Importa la función `useRTDB` desde `@vueuse/firebase` para vincular la variable todos a las actualizaciones en tiempo real desde Firebase Realtime Database
- Configura `useRTDB` para escuchar los cambios en la ubicación de **todos** en la base de datos y establece `autoDispose` en falso para evitar la eliminación automática del enlace en tiempo real cuando se desmonta el componente.

Para usar este componente de Vue en la página de inicio de su aplicación, realice los siguientes cambios en el archivo `src/pages/indexastro`:

```astro
---
// File: src/pages/index.astro

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

Los cambios anteriores importan el componente Vue `App` y usan la directiva client:load de Astro para asegurarse de que este componente Vue se hidrate inmediatamente en la página.

## Cree y pruebe su aplicación Astro localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

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

## Conclusión

En esta guía, aprendió cómo usar Firebase Realtime Database con Vue en una aplicación Astro.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)