Mi archivo firebaseConfig.js ubicado en el directorio src junto con main.js

 import * as firebase from 'firebase/app'; import 'firebase/firestore'; const firebaseConfig = { apiKey: "AIzaSyC61LOwmDxIqSr9KpVqRFpuDJNuhNSGT3U", authDomain: "vue-social-logins.firebaseapp.com", projectId: "vue-social-logins", storageBucket: "vue-social-logins.appspot.com", messagingSenderId: "11471906314", appId: "1:11471906314:web:88f56d6e710b443453a1f3", measurementId: "G-R855W28FHP" }; export const firebaseApp = firebase.initializeApp(firebaseConfig, 'vue-social-logins'); console.log(firebase); console.log(firebaseApp);

Mi archivo de componente SocialLogin.vue ubicado en la carpeta src/components

 <template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="handleSignIn">login</button> </div> </template> <script> require('../firebaseConfig.js'); import firebase from 'firebase/app'; import { onMounted } from 'vue'; import firebaseApp from '../firebaseConfig.js'; export default { name: 'SocialLogin', props: { msg: String }, setup() { onMounted(() => { console.log('on mount'); console.log('firebase2: ' + firebase); console.log('firebaseApp: ' + firebaseApp); }); } } </script> <style scoped> </style>

Console.log(firebase) y console.log(firebaseApp) del archivo firebaseConfig.js funcionan muy bien y los datos se propagan correctamente. Sin embargo, el archivo console.log('firebase2: ' + firebase); y console.log('firebaseApp: ' + firebaseApp); del registro del archivo del componente SocialLogin.vue como 'indefinido' para ambos. ¿Cómo hago para que firebase también se inicialice correctamente en mis archivos de componentes? Estoy tratando de implementar el inicio de sesión de Google a través de firebase para mi aplicación Vue3, pero sigo atascado en este paso.