Quiero hacer un formulario que haga la autenticación con la ayuda de firebase 9. El proyecto está hecho con Vue3. Tengo un formulario HTML:

 <form @submit.prevent="registr"> <div class="inputs"> <div class="input user"> <i class="fas fa-user"></i> <input type="text" placeholder="Username" v-model="username"> </div> <div class="input email"> <i class="fas fa-at"></i> <input type="email" placeholder="Email" v-model="email"> </div> <div class="input password"> <i class="fas fa-key"></i> <input type="password" placeholder="password" v-model="password"> </div> </div> <button type="submit"> Sign In </button> </form>

importaciones:

 import 'animate.css'; import "firebase/auth" import { createUserWithEmailAndPassword } from "firebase/auth";

y datos y métodos en la parte del script:

 data() { return{ username: null, email: null, password: null, } }, methods: { register(){ console.log('WORK'); createUserWithEmailAndPassword(this.email, this.password) .then(() => { console.log('success') }) .catch(err => { console.error(err) }) } }

Sin embargo, alguna parte de los métodos no funciona, incluso el simple console.log, que agrego para ver si el formulario se conecta con la función de la manera correcta. Además, tengo un error en la consola: Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_7__.default is undefined . ¿Por qué el método no funciona con el formulario?

Para inicializar firebase usé el siguiente código:

 import { initializeApp } from 'firebase/app'; import 'firebase/auth'; const firebaseConfig = { apiKey: "#################################", authDomain: "decbase-#####.firebaseapp.com", projectId: "decbase-#####", storageBucket: "decbase-#####.appspot.com", messagingSenderId: "############", appId: "1:0000000000:web:aaaaaaaaaaaaaaaaaaaaaa" }; const firebaseApp = initializeApp(firebaseConfig); export default firebaseApp;