'firebase' is not defined - Vue.js

Question

I am using firebase to log users in but the console complains that firebase is not defined. I am importing, firebase, I have my config set up correctly according to the docs that firebase give you, but still no luck.

import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router';
import firebase from 'firebase';
Vue.use(VeeValidate);
Vue.config.productionTip = false
// Initialize Firebase
 var config = {
   apiKey: "<my api key>",
   authDomain: "<my auth domain>",
   databaseURL: "<my database url>",
   projectId: "todo-bb5d3",
   storageBucket: "",
   messagingSenderId: "638496899966"
 };
 firebase.initializeApp(config);


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

the file thats causing the issue:

<template>
    <div class="LogIn">
      <h3>Sign Up</h3>
      <input type="email" v-model="email" placeholder="email" name="" value="">
      <input type="passeord" v-model="password" placeholder="password" name="" value="">
      <button v-on:click="signUp" type="button" name="button">Sign Up</button>
    </div>
</template>


<script>
  export default{
    name: 'LogIn',
    data: function() {
      return{
        email: '',
        password: ''
      }
    },
    methods: {
      signUp: function(){
        firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(
          function(user){
            alert('Your account has been created')
          },
          function(err) {
            alert('Opps! ' + err.message)
          }
        )
      }
    }
  }
</script>

8bit · Accepted Answer · 2018-06-18 15:52:19Z

2

You have to import firebase in the "file that's causing the issue".

import firebase from 'firebase';

Also not a good idea to paste your api key here, even for a test app, I suggest you edit your post and redact that.

answered Jun 18, 2018 at 15:52

8bit

5975 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Renaud Tarnec · Accepted Answer · 2018-06-18 15:58:03Z

0

One solution is to initialize it as follows, within the created Instance Lifecycle hook:

new Vue({
  router,
  render: h => h(App),
  created() {
    firebase.initializeApp(
      {
        apiKey: "...",
        authDomain: "....",
        databaseURL: "..."
        ...
      }
    )
  }
}).$mount('#app')

answered Jun 18, 2018 at 15:58

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

Collectives™ on Stack Overflow

'firebase' is not defined - Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related