firebase not defined Vue.js

Question

I'm new in vue.js and I'm learning vue.js from documentation and tutorial on internet, now I'm trying make app with Firebase and vue.js but my when I run it, an error says:

-firebase not defined

However, I'm pretty sure that I imported it. Here my code:

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from "firebase"

var config = {
 apiKey: "###########",
 authDomain: "###########",
 databaseURL: "###########",
 projectId: "###########",
 storageBucket: "###########",
 messagingSenderId: "###########"
};
 firebase.initializeApp(config);
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
 })

This my component register:

<template>
<div class="login">
    <h3>Lets Register</h3>
    <input type="email" v-model="email">
    <input type="password" v-model="password">
    <button v-on:click="register">Submit</button>
    <p><router-link to="/Login"> Login? </router-link></p>
</div>

<script>
     export default {
     name: 'Register',
     data () {
        return{
            email: '',
            password: ''
        }
      },
     methods:{
        register : function(){
            firebase.auth().createUserWithEmailAndPassword(this.email,this.password).then(
                function (user) {
                    alert('Account been created')
            },
            function(err){
                alert('opps'+ err.message)
            }
                );
            }
        }
    }

Any help would be appreciated.

Answer 1

In main.js just register firebase as global with Vue.use(firebase) like this, and all components can access that.

import firebase from 'firebase'
Vue.use(firebase) 

var config = {
 apiKey: "####",
 authDomain: "####",
 databaseURL: "####",
 projectId: "####",
 storageBucket: "####",
 messagingSenderId: "####"
};
firebase.initializeApp(config);

new Vue({
 el: '#app',
 render: h => h(App),
 router : router,
 firebase: firebase,
})

And in your components don't forget to import that like this:

import firebase from 'firebase'