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