)
¿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 firebaseEn 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?
Sincronización automática y reactiva
Autenticación sencilla y moderna
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.
Sigue leyendo
Una idea lleva a otra.
)
¿Qué es un Composable?
Un composable es una función que utiliza la Composition API de Vue.js para encapsular y reutilizar lógica con estado de manera modular. En otras palabras, permite extraer fragmentos de lógica (por ejemplo, rastreo de la posición del mouse, manejo de llamadas asíncronas, etc.) para que puedan ser utilizados en varios componentes sin repetir código.
)
defineModel() en Vue 3.4+: La evolución elegante del v-model en componentes
A partir de Vue 3.4 y disponible en la actual versión 3.5+, defineModel() se ha convertido en una de las macros más potentes dentro del <script setup>. Esta nueva sintaxis te permite trabajar con v-model de forma más clara, concisa y tipada, eliminando la necesidad de declarar manualmente props y emits para la comunicación padre-hijo. Si estás trabajando con Vue 3.5+, ya deberías estar usándolo. ¿La clave? Menos boilerplate, más fluidez, y una integración impecable con los modifiers y múltiples v-model. ¡Dile adiós a modelValue verboso y hola a bindings con estilo!
)
¿Y si Vue.js también hablara Web Components? La magia de defineCustomElement
Si eres fan de Vue.js como yo, seguramente has creado componentes reutilizables una y otra vez. Pero… ¿alguna vez te preguntaste cómo compartir tus componentes Vue fuera de una app Vue? ¿Qué pasaría si pudieras usarlos en React, Angular o incluso en HTML puro? La respuesta está en los Web Components y Vue tiene una herramienta poderosa para eso: defineCustomElement. Hoy te voy a contar cómo Vue y los Web Components pueden ser mejores amigos. Te prometo que al final vas a querer probarlo en tu próximo proyecto (o experimento).