Verwenden der Firebase-Echtzeitdatenbank in Astro mit Vue: Eine Schritt-für-Schritt-Anleitung

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

Verwenden der Firebase-Echtzeitdatenbank in Astro mit Vue: Eine Schritt-für-Schritt-Anleitung

Rishi Raj Jain
Using Firebase Realtime Database in Astro with Vue

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

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Inhaltsverzeichnis

Erstellen Sie eine neue Astro-Anwendung

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

Terminal window
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:

Terminal window
cd my-app
npm run dev

Die App sollte auf 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:

Terminal window
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:

{
"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:

Terminal window
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

{
"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:

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:

<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 („

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024