Comment utiliser Vue avec Firebase

Explorez les bases de l’utilisation de Vue avec Firebase, notamment la configuration d’un nouveau projet et l’exploitation de certaines fonctionnalités de Firebase pour lire et mettre à jour les informations de la base de données.

Voir.js est un cadre progressif pour la création d’interfaces utilisateur, tandis que Base de feu peut être compris comme une suite de services backend comprenant des bases de données en temps réel, l’authentification et l’hébergement. L’intégration de ces deux technologies permet aux développeurs de créer des applications dynamiques et réactives avec un temps de configuration minimal.

Dans cet article, nous explorerons les bases de l’utilisation de Vue avec Firebase, notamment la configuration d’un nouveau projet et l’exploitation de certaines fonctionnalités de Firebase pour lire et mettre à jour les informations de notre base de données.

Base de feu

Pour commencer à utiliser Vue avec Firebase, nous devons d’abord configurer un nouveau projet Firebase, puis l’intégrer à notre application Vue. Passons en revue quelques étapes de création d’un nouveau projet Firebase.

Nous allons d’abord nous connecter au Console Firebase et créez un nouveau projet.

Nous suivrons les invites pour créer un nouveau projet Firebase et une fois terminé, nous pourrons visiter notre nouveau tableau de bord de projet.

Firebase propose deux bases de données différentes, Base de données en temps réel et Base de données Firestore. Nous utiliserons la base de données Firestore car elle offre une base de données plus flexible et évolutive pour les applications Web et mobiles.

Dans le paramètre Firestore Database du tableau de bord du projet Firebase, nous allons créer une nouvelle base de données Firestore. Au fur et à mesure que nous créerons la base de données, nous veillerons à la créer en mode test nous permettant de développer et de tester rapidement.

Dans la page Présentation du projet du tableau de bord Firebase, nous enregistrerons une nouvelle application Web pour notre projet Firebase afin d’intégrer les services Firebase directement dans notre application Web. Une fois le projet Web créé, nous recevrons des instructions sur la façon d’installer Firebase dans notre projet Web et de commencer à utiliser le SDK pour interagir avec notre base de données à partir de notre projet Web.

Une fois notre base de données Firebase créée, nous pouvons maintenant passer à la création de notre projet Vue.

Vue

La documentation Vue recommande l’utilisation de Vite pour une configuration de développement moderne, rapide et efficace d’un projet Vue. Nous utiliserons créer-vuel’outil d’échafaudage officiel de projet Vue recommandé, pour démarrer un projet Vue alimenté par Vite.

Avec une version à jour de Noeud.js déjà installé, nous pouvons utiliser la commande suivante pour créer un projet Vue.

npm create vue@latest

Lorsque le nouveau projet Vue est installé, un nouveau répertoire est créé avec un projet Vite/Vue préconfiguré.

Pour exécuter notre application Vue, nous pouvons utiliser la commande suivante :

npm run dev

La commande ci-dessus lance l’application sur http://localhost:5173:

Intégrer Firebase dans notre projet Vue

Pour intégrer Firebase dans notre projet Vue, nous allons installer et utiliser deux bibliothèques distinctes :

• base de feu – le SDK principal pour interagir avec la suite de fonctionnalités de Firebase, telles que l’authentification, la base de données et le stockage
• vuefire – liaisons Firebase officielles pour les applications Vue

Dans notre répertoire de projet Vue, nous exécuterons les commandes suivantes pour installer les bibliothèques ci-dessus :

npm install firebase vuefire

Dans notre point d’entrée main.js fichier, nous suivrons les étapes décrites dans le Commencer guide de la documentation VueFire pour initialiser correctement Firebase dans notre application Vue.

Tout d’abord, nous allons importer le initializeApp() fonction, puis initialisez Firebase avec les détails de configuration spécifiques à notre projet :

import { createApp } from "vue";
import { initializeApp } from "firebase/app";
import App from "./App.vue";


export const firebaseApp = initializeApp({
  apiKey: "xxxx",
  authDomain: "xxxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx",
});

const app = createApp(App);
app.mount("#app");

Les valeurs de configuration ci-dessus (apiKey, authDomainetc.) peuvent être obtenus via notre console de projet Firebase. Pour des raisons de sécurité et de flexibilité, celles-ci devraient idéalement faire partie des variables de configuration d’environnement, en particulier dans les applications de production.

Ensuite, nous importerons et installerons le plugin VueFire Vue pour intégrer les capacités de données en temps réel de Firebase dans nos composants Vue.

import { VueFire } from "vuefire";
import { initializeApp } from "firebase/app";
import App from "./App.vue";


export const firebaseApp = initializeApp();

const app = createApp(App);


app.use(VueFire, { firebaseApp });

app.mount("#app");

Avec ce changement, notre application Vue est désormais intégrée avec succès à notre projet Firebase. Dans nos composants Vue, nous aurons accès à des composables comme useFirebaseApp(), useFirestore() et useDatabase().

Pour tester les choses, nous ajouterons une nouvelle collection et une nouvelle base de données à notre base de données Firebase, via la console Firebase, qui contient deux ensembles d’éléments de tâche, chaque tâche contenant id, title et completed champs.

Dans Firebase, une collection désigne un groupe de documents partageant les mêmes champs, tandis qu’un document représente une seule entrée de données et est stocké dans une collection sous la forme d’un ensemble de paires clé-valeur.

Dans notre application Vue, nous allons créer un <TodosList /> composant qui vise à afficher une liste d’éléments de tâches récupérés dans la base de données Firestore en temps réel. Dans le composant <script setup>nous importerons le getFirestore() et collection() fonctions de firebase/firestoreet le useCollection() fonction de vuefire. Nous importerons également le firebaseApp instance que nous avons créée à la racine main.js déposer.

<script setup>
  import { getFirestore, collection } from "firebase/firestore";
  import { useCollection } from "vuefire";
  import { firebaseApp } from "@/main";
</script>

<template></template>

Pour accéder à la base de données Firestore, nous utiliserons le getFirestore() fonctionner et passer dans le firebaseApp exemple. Pour accéder ensuite à la collection que nous avons récemment créée, nous utiliserons le useCollection() fonction de vuefire et faire référence au "todos" collection.

<script setup>
  import { getFirestore, collection } from "firebase/firestore";
  import { useCollection } from "vuefire";
  import { firebaseApp } from "@/main";

  const db = getFirestore(firebaseApp);
  const todos = useCollection(collection(db, "todos"));
</script>

<template></template>

Avec le todos collection à notre disposition, nous pouvons désormais parcourir les tâches à effectuer avec le v-for dans notre modèle de composant et afficher le titre et le statut terminé de chaque tâche.

<script setup>
  import { getFirestore, collection } from "firebase/firestore";
  import { useCollection } from "vuefire";
  import { firebaseApp } from "@/main";

  const db = getFirestore(firebaseApp);
  const todos = useCollection(collection(db, "todos"));
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <p>{{ todo.title }}</p>
      <p>
        <sub>completed: {{ todo.completed }}</sub>
      </p>
      <br />
    </li>
  </ul>
</template>

Nous rendrons ensuite le <TodosList /> composant dans le parent <App /> exemple.

<script setup>
  import TodosList from "./components/TodosList.vue";
</script>

<template>
  <TodosList />
</template>

Avec ce changement, la liste des éléments à faire de notre collection de tâches dans notre base de données Firebase nous sera présentée.

Ensuite, nous tenterons de créer un formulaire simple qui, une fois rempli, ajoutera un nouveau document de tâches à notre collection de tâches dans notre base de données. Nous mettrons à jour le modèle pour avoir une entrée pour le titre et le statut terminé du nouvel élément de tâche, et nous aurons un bouton qui, une fois déclenché, ajoutera la tâche à la collection.

<script setup>
  import { ref } from "vue";
  
  

  const newTodoTitle = ref("");
  const newTodoCompleted = ref(false);

  const addTodo = async () => {
    if (newTodoTitle.value.trim()) {
      
    }
  };
</script>

<template>
  
  <div>
    ---
    <p>
      <label>Title: </label>
      <input v-model="newTodoTitle" placeholder="Add new todo" />
    </p>
    <p>
      <label>
        <input type="checkbox" v-model="newTodoCompleted" />
        Completed
      </label>
    </p>
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

Nous allons maintenant tenter d’ajouter de nouvelles tâches à notre base de données Firestore à l’aide d’une interface de formulaire simple. Pour y parvenir, nous utiliserons le addDoc() fonction de firebase/firestore pour insérer de nouveaux documents dans notre todos collection avec des champs pour le titre et l’état d’achèvement.

<script setup>
  import { ref } from "vue";
  import { getFirestore, collection, addDoc } from "firebase/firestore";
  
  

  const newTodoTitle = ref("");
  const newTodoCompleted = ref(false);

  const addTodo = async () => {
    if (newTodoTitle.value.trim()) {
      await addDoc(collection(db, "todos"), {
        id: "3",
        title: newTodoTitle.value,
        completed: newTodoCompleted.value,
      });
      
      newTodoTitle.value = "";
      newTodoCompleted.value = false;
    }
  };
</script>

<template>
  
  <div>
    ---
    <p>
      <label>Title: </label>
      <input v-model="newTodoTitle" placeholder="Add new todo" />
    </p>
    <p>
      <label>
        <input type="checkbox" v-model="newTodoCompleted" />
        Completed
      </label>
    </p>
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

Avec ce changement, lorsque vous cliquez sur le bouton « Ajouter une tâche », un nouveau document est ajouté au Firestore. todos collection, contenant le titre de l’élément de tâche et son statut d’achèvement. Cet ajout sera répercuté sur tout composant qui souscrira au todos collecte en raison des capacités en temps réel de Firestore.

Conclure

Dans cet article, nous avons couvert l’essentiel de l’intégration de Vue.js avec Firebase, démontrant comment mettre en place un nouveau projet, configurer Firebase dans une application Vue et exploiter VueFire pour créer des applications Web dynamiques en temps réel.

Au fur et à mesure que vous continuez à développer avec Vue et Firebase, explorez d’autres fonctionnalités telles que Authentification Firebase pour gérer les comptes utilisateurs, Fonctions cloud Firebase pour exécuter la logique côté serveur et Stockage Firebase pour gérer les téléchargements de fichiers. Chacun de ces services s’intègre parfaitement à Vue et VueFire, améliorant les capacités d’une application et vous permettant d’offrir une expérience utilisateur plus riche.

Pour plus d’informations, assurez-vous de consulter le site officiel Base de feu et VueFire documentation!