0
479
Views¿Cómo inicializar firebase en vite y vue?
Soy nuevo en vite. Estoy tratando de inicializar la aplicación firebase. pero estoy recibiendo errores como a continuación
Firebase: no se ha creado ninguna aplicación Firebase '[DEFAULT]'; llame a Firebase App.initializeApp()
Creé un nombre de archivo firebase.ts pero no estoy muy seguro de dónde puedo incluir esto para inicializar firebase globalmente.
<script setup lang="ts"> import { ref } from 'vue' import { useRouter } from 'vue-router' import { useHead } from '@vueuse/head' import { isDark } from '/@src/state/darkModeState' import useNotyf from '/@src/composable/useNotyf' import sleep from '/@src/utils/sleep' import { getAuth, signInWithEmailAndPassword } from '@firebase/auth' const isLoading = ref(false) const router = useRouter() const notif = useNotyf() const username = ref('') const password = ref('') const handleLogin = async () => { if (!isLoading.value) { isLoading.value = true signInWithEmailAndPassword(getAuth(), username.value, password.value) .then((user) => { isLoading.value = false router.push({ name: 'sidebar-dashboards-course' }) }) .catch((err) => { isLoading.value = false notif.error( 'There is no user record corresponding to this identifier. The user may be deleted' ) }) } }¡Cualquier solución apreciada!
1 answers
Answer question0
En su firebase.ts , está inicializando Firebase usando la versión compat (que le permite usar la sintaxis de espacio de nombres incluso en V9) pero está tratando de usar la versión Modular en sus componentes Vue. En su lugar, intente inicializar Firebase usando SDK modular también. Entonces firebase.ts debería verse así:
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; const firebaseConfig = {...}; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const storage = getStorage(app); export { auth, db, storage }; Luego intente importar estas instancias en sus componentes en lugar de usar las funciones get[Service]() nuevamente.
import { auth } from "../path/to/firebase.ts" // update the path as per your dir structure // usage: instead of getAuth() here await signInWithEmailAndPassword(auth, username.value, password.value)