title: How to Add Firebase Firestore Data into SSR Nuxt Apps Vuex Store
body: <p>I'm trying to set locations into a Vuex store in my Nuxt app.  I've looked into using <a href="https://github.com/posva/vuexfire/tree/firestore" rel="nofollow noreferrer">vuexfire</a>, however, I'm unsure if this would be optimal in a SSR app or generally what is the most simple best practice.</p>
  
  <p>How do you request from firebase firestore and set the state (of the 'locations' in this example)?</p>
  
  <p>Would it be best to use nuxtServerInit in a SSR app?</p>
  
  <p>store/index.js</p>
  
  <pre><code>import Vuex from 'vuex'
  import firebase, {auth, db} from '@/services/firebaseinit.js'
  
  const createStore = () =&gt; {
    return new Vuex.Store({
      state: {
        user: null,
        locations: [],
      },
      getters: {
        // User
        activeUser: (state) =&gt; {
          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) =&gt; {
                auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
                resolve()
            })
        },
  
        signOut ({commit}) {
            auth.signOut().then(() =&gt; {
                commit('setUser', null)
            }).catch(error =&gt; console.log(error))
        },
  
      }
    })
  }
  </code></pre>