Vue with Firebase

npm install firebase

// src/firebase/config.js
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
}

const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)
export const db = getFirestore(app)

// src/composables/useFirebaseAuth.js
import { ref } from 'vue'
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
  onAuthStateChanged,
  updateProfile
} from 'firebase/auth'
import { auth } from '@/firebase/config'

export function useFirebaseAuth() {
  const user = ref(null)
  const loading = ref(true)
  const error = ref(null)

  // Listen to auth state changes
  onAuthStateChanged(auth, (firebaseUser) => {
    user.value = firebaseUser
    loading.value = false
  })

  async function register(email, password, displayName) {
    error.value = null
    try {
      const { user: newUser } = await createUserWithEmailAndPassword(auth, email, password)
      await updateProfile(newUser, { displayName })
      user.value = newUser
    } catch (err) {
      error.value = err.message
    }
  }

  async function login(email, password) {
    error.value = null
    try {
      await signInWithEmailAndPassword(auth, email, password)
    } catch (err) {
      error.value = err.message
    }
  }

  async function loginWithGoogle() {
    error.value = null
    try {
      const provider = new GoogleAuthProvider()
      await signInWithPopup(auth, provider)
    } catch (err) {
      error.value = err.message
    }
  }

  async function logout() {
    await signOut(auth)
    user.value = null
  }

  return { user, loading, error, register, login, loginWithGoogle, logout }
}

// src/composables/useFirestore.js
import { ref } from 'vue'
import {
  collection, doc, addDoc, getDoc, getDocs,
  updateDoc, deleteDoc, onSnapshot,
  query, where, orderBy, serverTimestamp
} from 'firebase/firestore'
import { db } from '@/firebase/config'

export function useTodos(userId) {
  const todos = ref([])
  const loading = ref(false)
  let unsubscribe = null

  // Real-time listener — updates todos when Firestore changes
  function startListening() {
    const q = query(
      collection(db, 'todos'),
      where('userId', '==', userId),
      orderBy('createdAt', 'desc')
    )
    unsubscribe = onSnapshot(q, (snapshot) => {
      todos.value = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    })
  }

  async function addTodo(text) {
    await addDoc(collection(db, 'todos'), {
      text,
      done: false,
      userId,
      createdAt: serverTimestamp()
    })
  }

  async function toggleTodo(id, done) {
    await updateDoc(doc(db, 'todos', id), { done: !done })
  }

  async function deleteTodo(id) {
    await deleteDoc(doc(db, 'todos', id))
  }

  function stopListening() {
    if (unsubscribe) unsubscribe()
  }

  return { todos, loading, startListening, stopListening, addTodo, toggleTodo, deleteTodo }
}

<!-- FirebaseTodo.vue -->
<script setup>
import { ref, onMounted, onUnmounted } from &#039;vue'
import { useFirebaseAuth } from &#039;@/composables/useFirebaseAuth'
import { useTodos } from &#039;@/composables/useFirestore'

const { user, login, logout, loginWithGoogle } = useFirebaseAuth()
const newTodo = ref(&#039;')

// Only start listening when user is logged in
const { todos, startListening, stopListening, addTodo, toggleTodo, deleteTodo } = useTodos(user.value?.uid)

onMounted(() => { if (user.value) startListening() })
onUnmounted(stopListening)

async function handleAdd() {
  if (!newTodo.value.trim()) return
  await addTodo(newTodo.value.trim())
  newTodo.value = &#039;'
}
</script>

<template>
  <div class="firebase-app">
    <div v-if="!user" class="login-screen">
      <h1>🔥 Firebase Todos</h1>
      <button @click="loginWithGoogle" class="google-btn">
        <img src="https://www.google.com/favicon.ico" width="18" />
        Sign in with Google
      </button>
    </div>
    <div v-else class="app">
      <header>
        <h2>Hello, {{ user.displayName }}!</h2>
        <button @click="logout">Logout</button>
      </header>
      <div class="add-row">
        <input v-model="newTodo" @keyup.enter="handleAdd" placeholder="New todo..." />
        <button @click="handleAdd">Add</button>
      </div>
      <ul>
        <li v-for="todo in todos" :key="todo.id">
          <input type="checkbox" :checked="todo.done" @change="toggleTodo(todo.id, todo.done)" />
          <span :class="{ done: todo.done }">{{ todo.text }}</span>
          <button @click="deleteTodo(todo.id)">🗑️</button>
        </li>
        <li v-if="todos.length === 0" class="empty">No todos yet!</li>
      </ul>
    </div>
  </div>
</template>