Tengo un problema realmente extraño con mi cliente de autenticación de Google en vue3. Estoy usando vue3-google-login y todo funcionó.

Hoy, cuando trabajé en una parte completamente diferente de la aplicación, descubrí que la página de inicio de sesión, que contiene el componente GoogleLogin, no muestra el botón de inicio de sesión de Google ni la superposición de inicio de sesión, lo cual es extraño porque no lo toqué en absoluto. después de que lo implementé con éxito. Lo único que cambié en todo el proyecto es instalar yarn y algunos paquetes a través de él. También eliminé algunos de los paquetes instalados (tiptap y algunas extensiones) nuevamente.

¿Alguien tiene idea de cómo puedo depurar esto? No recibí ningún mensaje de error en la consola y la herramienta vue dev indica que el componente está cargado.

principal.js

 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' import 'bootstrap/dist/css/bootstrap.css' import vue3GoogleLogin from 'vue3-google-login' axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'https://productionApi' : 'http://192.168.2.100/api/'; createApp(App) .use(store) .use(router) .use(vue3GoogleLogin, { clientId: 'someId' }) .mount('#app') import 'bootstrap/dist/js/bootstrap.js'

Login.vue

 <template> <!-- Google Login --> <div v-if="loggedIn == false"> <GoogleLogin :callback="callback" prompt/> </div> <div v-else> <h1>Welcome {{user.name}}</h1> <div @click="logout()" class="btn btn-danger">Abmelden</div> </div> </template> <script> export default { data() { return { loggedIn: false, user: null, callback: (response) => { this.$store.dispatch('login', response) this.loggedIn = this.$store.getters.isLoggedIn console.log("logged in") this.$router.push('/') } } }, mounted() { this.loggedIn = this.$store.getters.isLoggedIn if (this.loggedIn == true) { this.logout() } }, methods: { logout() { console.log("logout") this.$store.dispatch('logout') this.loggedIn = this.$store.getters.isLoggedIn this.$router.push('/') } } } </script>