How to Use Firebase with Vue: Simple Integration Guide

To use Firebase with Vue, first install Firebase via npm, then initialize Firebase in your Vue app by importing and configuring it with your project credentials. Use Firebase services like Firestore or Authentication inside Vue components by importing the initialized Firebase instance.

Syntax

Here is the basic syntax to set up Firebase in a Vue project:

• Install Firebase: Use npm to add Firebase to your project.
• Initialize Firebase: Import Firebase and configure it with your project settings.
• Use Firebase services: Access Firestore, Authentication, or other Firebase features inside Vue components.

bash and javascript

npm install firebase

// firebaseConfig.js
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

export default app;

Example

This example shows how to initialize Firebase in a Vue 3 app and use Firestore to fetch and display a list of items.

javascript and vue

/* main.js */
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');


/* firebaseConfig.js */
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };


/* App.vue */
<template>
  <div>
    <h1>Items from Firestore</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { collection, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfig';

const items = ref([]);

onMounted(async () => {
  const querySnapshot = await getDocs(collection(db, 'items'));
  items.value = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
});
</script>

Output

<h1>Items from Firestore</h1><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

Common Pitfalls

Common mistakes when using Firebase with Vue include:

• Not installing Firebase before importing it, causing errors.
• Using incorrect Firebase config values, which prevents connection.
• Trying to use Firebase services before initialization.
• Not handling asynchronous data fetching properly in Vue components.

javascript

/* Wrong: Using Firebase without initialization */
import { getFirestore } from 'firebase/firestore';
const db = getFirestore(); // Error: No Firebase app initialized

/* Right: Initialize Firebase first */
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

Quick Reference

Here is a quick summary to remember when using Firebase with Vue:

Step	Description
1. Install Firebase	Run npm install firebase in your project folder.
2. Initialize Firebase	Create a config file with your Firebase project settings.
3. Import Firebase services	Use Firestore, Auth, etc., by importing them from Firebase.
4. Use in Vue components	Fetch or update data inside lifecycle hooks like onMounted.
5. Handle async data	Use ref and async/await to manage data loading.

Key Takeaways

Always install and initialize Firebase before using its services in Vue.

Use Firebase config from your Firebase console to connect your app correctly.

Access Firebase services like Firestore inside Vue lifecycle hooks for data handling.

Handle asynchronous Firebase calls with async/await and Vue's reactive refs.

Check for common mistakes like missing initialization or wrong config values.