main.js

./src/main.js

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from 'firebase'


firebase.initializeApp({
 apiKey: "AIzaSyBZXlv0CUZBdPWvyzzi2eaBlXT764hoIDM",
 authDomain: "prueba-28ec5.firebaseapp.com",
 databaseURL: "https://prueba-28ec5.firebaseio.com",
 projectId: "prueba-28ec5"
})

/* eslint-disable */
Vue.config.productionTip = false

const unsubscribe = firebase.auth()
 .onAuthStateChanged((firebaseUser) => {
   new Vue({
     //el: '#app',
     router,
     store,
     render: h => h(App),
     created () {
       if (firebaseUser) {
         store.dispatch('autoSignIn', firebaseUser)
       }
     }
   }).$mount('#app')
   unsubscribe()
})

Importaciones

Importamos:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from 'firebase'

Estamos importando la librería vue, y vuetify como un plugin.

Importamos también App.vue como App (así se importan los componentes en Vue).

También importamos el router (contrala la vista a mostrar para cada path).

Importamos el store que es donde guardamos el estado de la aplicación (basado en Vuex).

Por último importamos Firebase. Firebase es un BaaS (Backend as a Service). Es una base de datos en tiempo real de Google.

Inicializamos Firebase

Esto se hace con:

firebase.initializeApp({
  apiKey: "AIzaSyBZXlv0CUZBdPWvyzzi2eaBlXT764hoIDM",
  authDomain: "prueba-28ec5.firebaseapp.com",
  databaseURL: "https://prueba-28ec5.firebaseio.com",
  projectId: "prueba-28ec5"
})

Esta información se consigue:

1. Vamos a la Consola de Firebase.
2. Elegimos el proyecto
3. Click en Autentificación
4. Click en Configuración Web.

Production Tip

Lo siguiente se explica aquí:

Vue.config.productionTip = false

Set this to false to prevent the production tip on Vue startup.

Hacemos

El siguiente código:

const unsubscribe = firebase.auth()
  .onAuthStateChanged((firebaseUser) => {
    new Vue({
      //el: '#app',
      router,
      store,
      render: h => h(App),
      created () {
        if (firebaseUser) {
          store.dispatch('autoSignIn', firebaseUser)
        }
      }
    }).$mount('#app')
    unsubscribe()
})

No entiendo bien este código.

This code is explained here, here and here. Long story short, we call our Vue instance after observer onAuthStateChanged finish a check. And after resolving user’s state we stop the observer by calling unsubscribe().

Hay que analizarlo junto con router (la parte de beforeEach).

Instancia de Vue

Por un lado se crea la instancia de Vue y se monta en #app de index.html:

Instancia de Vue montada en #app

const unsubscribe = firebase.auth()
  .onAuthStateChanged((firebaseUser) => {
    new Vue({
      //el: '#app',
      router,
      store,
      render: h => h(App),
      created () {
        if (firebaseUser) {
          store.dispatch('autoSignIn', firebaseUser)
        }
      }
    }).$mount('#app')
    unsubscribe()
})

Observer

Según la documentación, la función onAuthStateChanged devuelve la función unsubscribe para el observador.

According to the documentation, the onAuthStateChanged() function returns the unsubscribe function for the observer.

So you can just:

var unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
    // handle it
});

And then:

unsubscribe();