Component auth has not been registered yet #1461
-
Hi i am trying to Use Vue from CDN , so is this even possible to with vuefire. I must be missing some dependencies ? but I keep running into this error Component auth has not been registered yet .. Help really appreciated. If all else fails i might jsut have to stick with firebase-auth.js Thanks <!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.4.0/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<title>Google OAuth Login</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"vuetify": "https://cdn.jsdelivr.net/npm/vuetify@3.4.0/dist/vuetify-labs.esm.js",
"vuefire": "https://cdn.jsdelivr.net/npm/vuefire@3.1.18/+esm",
"firebase/app": "https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js"
}
}
</script>
<div id="app"></div>
<script type="module">
import { createApp, ref } from 'vue'
import { createVuetify } from 'vuetify'
import { VueFire, VueFireAuth, useCurrentUser } from 'vuefire'
import { initializeApp } from 'firebase/app';
// import { getAuth } from 'firebase/auth';
// TODO: Replace with your Firebase config
const firebaseConfig = {
apiKey: "dummy",
authDomain: "dummy",
databaseURL: "dummy",
projectId: "dummy",
storageBucket: "dummy",
messagingSenderId: "dummy",
appId: "dummy",
measurementId: "dummy"
};
// Initialize Firebase
const fireapp = initializeApp(firebaseConfig);
// const auth = useFirebaseAuth()
const vuetify = createVuetify({
theme: {
defaultTheme: 'dark'
}
})
createApp({
setup() {
const count = ref(0)
return { count}
},
template: `
<div>
</div>
`
}).use(vuetify).use(VueFire, {
// imported above but could also just be created here
firebaseApp: fireapp,
modules: [
// we will see other modules later on
VueFireAuth()
],
}).mount('#app')
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
You probably need to use vue-demi too: |
Beta Was this translation helpful? Give feedback.
You probably need to use vue-demi too:
"vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi@0.14.6/+esm",
. I would also use vue from the same cdn just in case. Check the actual files in the cdn to see if they import from modules likeimport ... from 'stuff'
. That way you will know what to add to the import map.On a side note, for a project like this, I will discourage you to use CDNs. The project is complex enough to benefit a lot from a bundler and you will avoid all of these issues too