---
title: "Verwenden der Firebase-Echtzeitdatenbank in Astro mit Vue"
description: "Wie verwende ich die Firebase-Echtzeitdatenbank in einer Astro-Anwendung mit Vue?"
source: "https://www.launchfa.st/de/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" />

In diesem Leitfaden erfahren Sie, wie Sie Firebase-Echtzeitdatenbankbenutzer in einer Astro-Anwendung mit Vue verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Aktivierung der serverseitigen und clientseitigen Hydratation von Vue 3 und der Integration von Firebase Echtzeitdatenbank nahtlos

## Voraussetzungen

Sie benötigen Folgendes:

- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
– Ein [Firebase](https://consolefirebase.google.com)-Konto

## Inhaltsverzeichnis

- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Integrieren Sie Vue in Ihr Astro-Projekt](#integrate-vue-in-your-astro-project)
- [Integrieren Sie die Firebase-Echtzeitdatenbank in Ihr Astro-Projekt](#integrate-firebase-realtime-database-in-your-astro-project)
  - [VueUse SDK für Firebase Realtime Database installieren](#install-vueuse-sdk-for-firebase-realtime-database)
  - [Firebase-Echtzeitdatenbank-Client instanziieren](#instantiate-firebase-realtime-database-client)
  - [Indexroute erstellen](#create-the-index-route)
- [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally)

## Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

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

„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
- „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

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

Die App sollte auf [localhost:4321](http://localhost:4321/) ausgeführt werden.

Kommen wir nun zur Integration von Vue in Ihre Astro-Anwendung

## Integrieren Sie Vue in Ihr Astro-Projekt

Um dynamische Benutzeroberflächen zu erstellen, verwenden Sie Vue in Ihrem Astro-Projekt. Führen Sie den folgenden Befehl aus:

```bash
npx astro add vue
```

„npx“ ermöglicht es uns, Binärdateien von npm-Paketen auszuführen, ohne sie zuerst global installieren zu müssen

Wenn Sie dazu aufgefordert werden, wählen Sie Folgendes aus:

- „Ja“, wenn Sie gefragt werden, ob die Vue-Abhängigkeiten installiert werden sollen
- „Ja“, wenn Sie gefragt werden, ob Änderungen an der Astro-Konfigurationsdatei vorgenommen werden sollen
- „Ja“, wenn Sie gefragt werden, ob Änderungen an der Datei „tsconfigjson“ vorgenommen werden sollen

Um sich nun die Mühe zu ersparen, relative Pfade für Importe zu erstellen, aktualisieren Sie „tsconfigjson“ wie folgt:

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

## Integrieren Sie die Firebase-Echtzeitdatenbank in Ihr Astro-Projekt

### Installieren Sie das VueUse SDK für die Firebase-Echtzeitdatenbank

Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung der Firebase Realtime Database zu installieren:

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

Der Befehl installiert die folgende Bibliothek:

- „@vueuse/firebase“: Ein Paket, das die Echtzeitbindungen für Firebase ermöglicht
- „Firebase“: Ein Paket zur Interaktion mit Firebase

### Firebase Realtime Database-Client instanziieren

Um eine Verbindung mit Ihrer Firebase-Instanz herzustellen, erstellen Sie im Verzeichnis „src“ ein „firebasejson“ mit der Dienstkontoschlüsseldatei für Firebase. Stellen Sie sicher, dass der Wert „databaseURL“ vorhanden ist und auf die URL Ihrer Firebase-Echtzeitdatenbank verweist

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

Um eine Firebase-App einzurichten und einen Verweis auf die Firebase-Echtzeitdatenbank zu exportieren, erstellen Sie eine Datei „Firebasets“ im Verzeichnis „src“ mit dem folgenden 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);
```

Der obige Code führt Folgendes aus:

– Importiert die Funktion „initializeApp“, um eine Firebase-App zu initialisieren
– Importiert das Firebase-Konfigurationsobjekt aus **firebasejson**
– Importiert die Funktion „getDatabase“, um einen Verweis auf die Firebase-Echtzeitdatenbank zu erhalten
– Ruft „initializeApp“ mit dem firebaseConfig-Objekt auf, um die Firebase-App zu initialisieren
- Exportiert die Referenz in die Firebase-Echtzeitdatenbank. Diese exportierte Referenz kann für die Interaktion mit der Firebase-Echtzeitdatenbank aus anderen Teilen der Anwendung verwendet werden

### Erstellen Sie die Indexroute

Erstellen Sie eine „App“.vue im Verzeichnis „src“ mit dem folgenden Code:

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

Der obige Code führt Folgendes aus:

– Definiert eine Vorlage mit einer ungeordneten Liste („<template>“), um eine Liste von Aufgaben anzuzeigen
– Importiert die Firebase Realtime Database-Instanz aus dem Modul „@/firebase“.
– Importiert die Funktion „ref“ aus Firebase, um einen Verweis auf einen bestimmten Ort in der Firebase-Echtzeitdatenbank zu erstellen
– Importiert die Funktion „useRTDB“ aus „@vueuse/firebase“, um die Todos-Variable an Echtzeitaktualisierungen aus der Firebase-Echtzeitdatenbank zu binden
– Konfiguriert „useRTDB“ so, dass es am **todos**-Speicherort in der Datenbank auf Änderungen wartet, und setzt „autoDispose“ auf „false“, um eine automatische Löschung der Echtzeitbindung zu verhindern, wenn die Komponente nicht gemountet wird

Um diese Vue-Komponente auf der Startseite Ihrer Anwendung zu verwenden, nehmen Sie die folgenden Änderungen in der Datei „src/pages/indexastro“ vor:

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

Die oben genannten Änderungen importieren die Vue-Komponente „App“ und verwenden die client:load-Direktive von Astro, um sicherzustellen, dass diese Vue-Komponente sofort auf der Seite hydratisiert wird

## Erstellen und testen Sie Ihre Astro-Anwendung lokal

Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:

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

## Abschluss

In dieser Anleitung haben Sie erfahren, wie Sie Firebase Realtime Database mit Vue in einer Astro-Anwendung verwenden

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).