firebase - update - vue js authentication

VueJS+VUEX+Firebase: ¿Dónde enganchar Firebase?

Question

Me gustaría integrar Firebase en mi aplicación Vue.JS.

Me pregunto DONDE colocar las referencias a Firebase.

Answer 1

Para instalar firebase como una dependencia en su cd proyecto en su directorio de proyecto y ejecute el siguiente comando en la línea de comando

npm install --save firebase

Ahora en tu archivo main.js agrega esto

import Vue from ''vue''
import App from ''./App.vue''
import * as firebase from ''firebase''
import { store } from ''./store/store''


const config = {
    apiKey: "xxxxxxx",
    authDomain: "xxxxxxx",
    databaseURL: "xxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxxx"
  };

Vue.prototype.$firebase = firebase.initializeApp(config);

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

• también puede agregar sus credenciales de firebase en un archivo js externo e importarlo en el archivo main.js de la siguiente manera:

firebase-config.js

export const config = {
    apiKey: "xxxxxxx",
    authDomain: "xxxxxxx",
    databaseURL: "xxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxxx"
  }; 

Ahora en tu main.js haz lo siguiente

import Vue from ''vue''
import App from ''./App.vue''
import * as firebase from ''firebase''
import { store } from ''./store/store''
import { config } from ''./firebase-config''


Vue.prototype.$firebase = firebase.initializeApp(config);

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

• la adición de firebase al Vue.prototype permite el uso de firebase en tus componentes vue al usar this.$firebase

• si no quieres este comportamiento, puedes inicializar firebase usando firebase.initializeApp(config);

• ahora llegando a tu tienda Vuex puedes importar el módulo de Firebase como se muestra a continuación

  import Vue from ''vue''
  import Vuex from ''vuex''
  import * as firebase from ''firebase''
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
      state:{},
      mutations:{},
      actions:{
          myFirebaseAction: ({commit}) => {
              //you can use firebase like this
              var ref = firebase.database().ref()
          }
      }
  });