Firebase App named '[DEFAULT]' already exists in Vuex + Nuxt SPA

Question

I used the Vue CLI with the nuxt/starter template. I created index.js in the /store folder with the following contents:

import Vuex from 'vuex'
import firebase from 'firebase'
import { firebaseMutations } from 'vuexfire'

var db = firebase.initializeApp({
  databaseURL: 'https://vuefiredemo.firebaseio.com'
}).database()

var todosRef = db.ref('todos')

const store = new Vuex.Store({
  state: {
    counter: 0,
    todos: todosRef
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    },
    ...firebaseMutations
  }
})

export default store

This works, data works until the page is refreshed and server side rendered. Only when SSR I get the following error:

Nuxt.js Error: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

Is this because SSR creates one Firebase instance and then the client creates another?

Vincent Song Vincent Song · Accepted Answer · 2017-05-25T01:36:03

You could try this:

if (firebase.apps.length === 0) {
  firebase.initializeApp({
    databaseURL: 'https://vuefiredemo.firebaseio.com'
  })
}
export default firebase.database()

Firebase App named '[DEFAULT]' already exists in Vuex + Nuxt SPA

1 Answers