[Vuejs]-Firebase and Vue: How to properly initialize firebase and vuefire?

by

0👍

I got it working. Here’s what I had to do. My confusion was thinking that I needed to initialize firebase/auth, but all I have to do for that is to import the firebase module in the login component.

Login.vue

<script>
import firebase from 'firebase/app'
export default {
  name: 'Login',
  data() {
...snip...
  methods: {
    login() {
      const info = {
        email: this.formData.email,
        password: this.formData.password
      }
      firebase
        .auth()
        .signInWithEmailAndPassword(info.email, info.password)
        .then(
          () => {
            this.$router.push('photos')
          },
          error => {
            this.error = error.message
          }
        )
    }
  }

Photos.vue

<script>
import { db } from '@/db'
export default {
  props: ['user'],
  name: 'Photos',
  data() {
    return {
      photos: []
    }
  },
  firestore: {
    photos: db.collection('photos').orderBy('title')
  },
  methods: {
    // submitHandler(data) {
    //   // alert(`Thank you, ${data.firstname}`);
    //   db.collection("users")
    //     .add({
    //       firstname: data.firstname
    //     })
    //     .then(docRef => {
    //       console.log("Doc Id: ", docRef.id);
    //     })
    //     .catch(error => {
    //       console.error("error: ", error);
    //     });
    // }
    //     addName() {
    //   db.collection("users")
    //     .add({
    //       first: "Ada",
    //       last: "Lovelace",
    //       born: 1815
    //     })
    //     .then(function(docRef) {
    //       console.log("Document written with ID: ", docRef.id);
    //     })
    //     .catch(function(error) {
    //       console.error("Error adding document: ", error);
    //     });
    // }
  }
}
</script>

db.js:

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

const firebaseConfig = {
 ..config here..
}

// firebase.initializeApp(firebaseConfig)

// Get a Firestore instance
export const db = firebase.initializeApp(firebaseConfig).firestore()

//guess I dont' need to do this here
// export const auth = firebase.initializeApp(firebaseConfig).auth()

// Export types that exists in Firestore
// Assuming might want to use these features later
const { Timestamp, GeoPoint } = firebase.firestore
export { Timestamp, GeoPoint }

For vuefire, my main.js looks like so:

import Vue from “vue”

import App from "./App.vue"
import router from "./router"
import { firestorePlugin } from "vuefire"
import "bootstrap/dist/css/bootstrap.min.css"

Vue.config.productionTip = false
Vue.use(firestorePlugin)

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

Now, I dont’ know if that’s the optimal solution for decreasing bundle size, so if anyone has a better suggestion, let me know. But, thanks for the help!

Leave a comment