Vue JS : Wait firebase to load
Question
I want to use firebase inside a Vue JS component, but it seems like the firebase object is loaded after the creation of my component.
Is there a way to wait for firebase to load before executing JS code ?
Exemple : i want to create a vue composant called loader which output the firebase object on the webconsole at his creation
<html>
<head>
<!-- Firebase -->
<script defer src="/__/firebase/5.0.4/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/5.0.4/firebase-auth.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-database.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-messaging.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<!-- Vue.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var loader = {
template: '<div></div>',
created: function(){
console.log(window.firebase); // undefined
}
};
var app = new Vue({
el : '#app',
template :
`<div>
<loader></loader>
</div>`,
components : {
'loader' : loader
}
});
</script>
</body>
</html>
It doesn't work but, of course, one second later i can output the firebase object on the console.
PS :
- It is my first question on this website so if you have any advice on how to ask question, i will take it as well.
- I am french so pardon my english
1 answers
solution1
0 ACCPTED 2018-06-06 12:04:42
You need to remove the defer attributes from the firebase scripts. It will cause the scripts to be executed once the whole document has been parsed, which means that your script in the body runs before firebase scripts.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.