How to Add Firebase Firestore Data into SSR Nuxt Apps Vuex Store

Question

I'm trying to set locations into a Vuex store in my Nuxt app. I've looked into using vuexfire, however, I'm unsure if this would be optimal in a SSR app or generally what is the most simple best practice.

How do you request from firebase firestore and set the state (of the 'locations' in this example)?

Would it be best to use nuxtServerInit in a SSR app?

store/index.js

import Vuex from 'vuex'
import firebase, {auth, db} from '@/services/firebaseinit.js'

const createStore = () => {
  return new Vuex.Store({
    state: {
      user: null,
      locations: [],
    },
    getters: {
      // User
      activeUser: (state) => {
        return state.user
      },
      // Locations
      loadedLocations(state) {
        return state.loadedLocations
      }
    },
    mutations: {
      // User
      setUser (state, payload) {
        state.user = payload
      },
      // Locations
      setLocations (state, locations) {
        state.locations = locations
      }
    },
    actions: {
      // Locations
      setLocations(vuexContext, locations) {
        vuexContext.commit('setLocations', locations)
      },  

      // Users
      autoSignIn ({commit}, payload) {
        commit('setUser', payload)
      },

      signInWithFacebook ({commit}) {
          return new Promise((resolve, reject) => {
              auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
              resolve()
          })
      },

      signOut ({commit}) {
          auth.signOut().then(() => {
              commit('setUser', null)
          }).catch(error => console.log(error))
      },

    }
  })
}

Andrew1325 Andrew1325 · Accepted Answer · 2018-10-22T08:56:51

I haven't used vuexfire but have used firebase with nuxt and it works pretty well. this is what I did.

npm install --save firebase

create a file called firebase.js and put this sort of code in it:

import * as firebase from 'firebase'

if (!firebase.apps.length) {
    firebase.initializeApp({
    apiKey: '<your-api-key>',
    authDomain: '<your-domain>',
    databaseURL: '<your-url>',
    projectId: '<your-id>',
    storageBucket: '<your-bucket>'
    })
}

export { firebase }

then you register that file as a plugin in nuxt.config.js

plugins: [
    '@plugins/firebase.js'
  ],

You need to import firebase at the top of your index.js (or other file you're using it in) in the store.

import * as firebase from 'firebase'

then you can use firebase in your nuxtServerInit as you want. Eg.

    actions: {
                nuxtServerInit({dispatch}, context) {
                  return Promise.all([
                    dispatch('get_posts', context),
                    dispatch('any_other_actions', context)
                  ]);
                },
                get_posts (vuexContext, context) {
                  return firebase.database().ref(YOUR DB).once('value')
                  .then(res => {

                  //...What you want it to do here


                    })
                },

Firebase is pretty powerful and you'll want to read the docs for specifics about the functions you want to perform but yeah, goes good in nuxt.

How to Add Firebase Firestore Data into SSR Nuxt Apps Vuex Store

1 Answers