How to use Nuxt with VueFire and SSR

[ReeVicente]

I dont understand how that works, please add to dock or give me a example

[posva]

It is indeed missing the docs. The whole idea goes around $bind returning a promise that resolves once the data is ready. So you can wait for it in asyncData:

data: () => ({ items: [] }), // initialise items
async asyncData () {
  await this.$bind('items', db.collection('items'))
  // no need to return the data as it is bound in data  
  return {}
}

[dac3971]

@posva you don't have access to this from asyncData https://nuxtjs.org/api/

[posva]

Forgot about that! With vuexfire you can still access the store from the context passed to asyncdata but with vuefire it's a bit different. It should be possible to call $bind through the Vue constructor with something like Vue.prototype.$bind.call({}) and await that promise in one asyncdata property but I need to check a bit more since the whole point of using bind was to make it work both on client and on server

[max8hine]

Hi All,

I could not find this.$bind in Nuxt's asyncData(), but I could find this.$nuxt.$bind in Nuxt's asyncData.

I tried something below and no success

data: () => ({ text: '' }), // initialise items
async asyncData () {
  const ref = db.collection('test').doc('test')
  const snap = await ref.get()
  await this.$nuxt.$bind('text', snap.data().text)
  // await this.$nuxt.$bind('text', 'Today is a good day.') // also not working by giving a value directly.
  return
}

I use Nuxt plugin to add vue-fire

[posva]

This is not yet supported on vuefire package. It's only supported by vuexfire since you can await an action in fetch or asyncdata. I need to find a way to fix hydration and will expose a nuxt plugin or module in the future to enable ssr wot vuefire.

[agcty]

This is not yet supported on vuefire package. It's only supported by vuexfire since you can await an action in fetch or asyncdata. I need to find a way to fix hydration and will expose a nuxt plugin or module in the future to enable ssr wot vuefire.

Is there any update on this? Would be really awesome

[posva]

No updates no. For the moment use vuexfire, it's more adapted to bigger apps anyway :). When you are doing SSR, your app isn't that simple anymore.

[chasebank]

@posva I understand the vuexfire repo has now been archived, but is there any chance you could take another look at posva/vuexfire#124 (comment) and address it here?

I linked to a (not working) demo repo in that thread. Someone just commented on the demo, also looking for help with Nuxt and vuexfire, but I still haven't figured it out.

Thanks so much for your hard work!

[posva]

vuexfire is now here, that's why it got archived. I'll paste the example I put there about how to use Vuexfire with Nuxt:

// firebase/index.js
import { firebase } from '@firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const config = {
  apiKey: '...',
  authDomain: '...',
  projectId: '...',
}

export const db = firebase.initializeApp(config).firestore()


// Export utility functions
export const { Timestamp } = firebase.firestore

// firebase/collections.js
import { db } from './index'

export const users = db.collection('users')
export const matches = db.collection('matches')
// store/index.js
import { vuexfireMutations as mutations } from 'vuexfire'

export const state = () => ({})

export { mutations }

// store/matches.js
import { firestoreAction } from 'vuexfire'
import { matches, users } from '../firebase/collections'

// omitting state, mutations, getters

const actions = {
  subscribeToAllMatches: firestoreAction(({ bindFirestoreRef }) => {
    return bindFirestoreRef('matches', matches)
  }),
  // async version
  subscribeToMatch: firebasestore(async ({ bindFirestoreRef }, { matchRef ) => {
    await bindFirestoreRef('match', matchRef)
  }),
}

pages/matches.vue

<template>
  <div>
    <ul>
      <li v-for="match in matches">{{ match }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: mapState('matches', ['matches']),

  // return a promise
  fetch({ store }) {
    return store.dispatch('matches/subscribeToAllMatches')
  },
}
</script>

[krisztianodor]

@posva That's not working for me! I got 'this. subscribetoAllMatches is not a function' error at the fetch hook. But in the create hook it works.

[trickstival]

@posva is the nuxt plugin going to be another package?

[posva]

a plugin would be part of the package, but not sure yet of the features to add yet

[lupas]

I played around with vuexfire and nuxt when testing if vuexfire works with nuxt-fire (see this issue), and I got it to work just fine.

Without using fetch() but using the created() hook.

I created this example repository for vuexfire with nuxt-fire, I hope it helps someone:
https://github.com/lupas/nuxt-fire-vuexfire-example

I'm using nuxt-fire here but this is basically the same as initiating firebase yourself, so it should work the same way for projects who are not using nuxt-fire.

The examples uses universal mode (resp. nuxt generate) and not SPA mode.

Update:
As @posva noted below, this example does not fetch the data on server-side and therefore is not truly a working SSR example.