Potencia tu app Vue con Firebase + VueFire

¿Qué es VueFire? VueFire te permite conectar tu app Vue 3 con Firebase (Firestore, Auth, RTDB, Storage) de forma sencilla y reactiva usando composables como useAuth, useFirestore, etc. Ideal si quieres apps en tiempo real sin escribir cientos de líneas de lógica.

¿Qué hace VueFire por ti?

  • Se encarga de la sincronización automática de datos.

  • Simplifica el acceso a Firebase con composables como useFirestore, useAuth, useDatabase, etc.

  • Te ayuda a crear apps en tiempo real con muy poco esfuerzo.

  • Funciona perfecto con Vite, Pinia y toda la nueva ola del ecosistema Vue 3.

Instalación y configuración

npm install vuefire firebase

En tu main.ts o main.js: 

import { createApp } from 'vue'
import App from './App.vue'
import { VueFire, VueFireAuth } from 'vuefire'
import { initializeApp } from 'firebase/app'

const firebaseApp = initializeApp({
  apiKey: 'TU_API_KEY',
  authDomain: 'TU_DOMINIO.firebaseapp.com',
  projectId: 'TU_PROJECT_ID',
  ...otras opciones
})

const app = createApp(App)

app.use(VueFire, {
  firebaseApp,
  modules: [VueFireAuth()],
})

app.mount('#app')

Autenticación con Google

<script setup lang="ts">
import { useFirebaseAuth } from 'vuefire'
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'

const googleAuthProvider = new GoogleAuthProvider()
const auth = useFirebaseAuth()

const loginWithGoogle = () => {
  if (!auth) {
    console.error('Firebase Auth instance is not available.')
    return
  }
  error.value = null
  signInWithPopup(auth, googleAuthProvider)
    .then(() => {
      console.log('User signed in successfully')
      toast.success('Sesión iniciada con éxito')
      router.push({ name: 'bindeo-app' })
    })
    .catch((error) => {
      console.error('Error signing in:', { error })
      toast.error('Error al iniciar sesión')
      error.value = error.message
    })
}
</script>

<template>
  <button @click="loginWithGoogle">
    Iniciar sesión con Google
  </button>
</template>

Ahora puedes acceder al usuario autenticado desde useCurrentUser

<script setup lang="ts">
import { useCurrentUser } from 'vuefire'
import HeaderApp from '@/components/HeaderApp.vue'
const user = useCurrentUser()
</script>

<template>
  <div>
    <HeaderApp
      v-if="user"
      :name="user.displayName || user.email"
      :email="user.email"
      :photoURL="user?.photoURL"
    />
    <RouterView />
  </div>
</template>

¿Por qué probar VueFire?

  1. Sincronización automática y reactiva

  2. Autenticación sencilla y moderna

  3. Ideal para apps Vue 3 con Vite + Composition API

¡Te invito a probar VueFire!

Haz una pequeña prueba en tu app personal o un side project.
Empieza por conectar Firestore o Auth y verás lo fluido que es el desarrollo.