nuxt-community/firebase-module

🔥 Easily integrate Firebase into your Nuxt project. 🔥

Easily integrate Firebase into your Nuxt project.

IMPORTANT!

⚠️ Nuxt 3 not supported ⚠️:

This module was written for Nuxt 2 and does currently not support Nuxt 3. There are currently no plans to support Nuxt 3 in the near future in this module. However, you can take a look at VueFire Nuxt module for Nuxt 3 support

ℹ️ Modular Mode (Firebase v9+) ℹ️:

This module does not support the new modular syntax from Firebase v9+.

If you plan to use the new modular mode of Version 9, we advise you to implement Firebase manually as described in the following medium article.

It is currently unclear when, and if, this module will support the new modular mode. See discussion.

Links

• 📘 Documentation
• 🔖 Release notes
• 👥 Community

Quick Setup

Make sure you are using Nuxt 2 and have Firebase v8 installed in your project.

yarn add firebase # OR npm i firebase

Install the module via NPM or Yarn:

yarn add @nuxtjs/firebase # OR npm i @nuxtjs/firebase

Quick Config

Add the following to your nuxt.config.js.

See all configuration options here.

modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // Just as example. Can be any other service.
        }
      }
    ]
  ],

Quick Usage

Now you can use all Firebase services with this.$fire.auth, this.$fire.firestore, this.$fire.messaging etc. (see list here).

Example:

try {
  await this.$fire.auth.createUserWithEmailAndPassword('[email protected]', 'test')
} catch (e) {
  handleError(e)
}

Guidelines for issues & feature requests

• Use the GitHub issue search — check if the issue or feature request has already been reported.
• Check if the issue has been fixed — try to reproduce it using the latest master or development branch in the repository.
• Isolate the problem — create a reduced test case and a live example.

A good issue shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What versions are you using? What would you expect to be the outcome? All these details will help people to fix any potential bugs.

If you have difficulties that are most likely not bugs or if you just have a simple questions, please ask them in the Nuxt Discord server instead.

If your issue does not suffice these guidelines, it might be closed immediately.

License

MIT - Nuxt-Community - Pascal Luther

firebase-module's Issues

Suggestion: use plugin template and only import the services needed

Hey, thanks for this module. I was wondering whether you included the service if's on purpose in the plugin or not? The issue at the moment is that all the firebase services will still be included in your bundles. Ie if you dont use firestore you will still have a firestore chunk of 1MB.

If you would refactor the plugin as follows (so the ifs are on the template level, not on the plugin level) then the firebase services that are not enabled during build time wont be included in any bundle

import firebase from 'firebase/app'
<% if (options.services.auth) { %>import 'firebase/auth'<% } %>
<% if (options.services.realtimeDb) { %>import 'firebase/database'<% } %>

export default async (ctx, inject) => {
  const firebaseConfig = JSON.parse(`<%= serialize(options.config) %>`)

  // Don't include when Firebase is already initialized
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
  }

  <% if (options.services.auth) { %>
  const fireAuth = firebase.auth()
  const fireAuthObj = firebase.auth
  inject('fireAuth', fireAuth)
  inject('fireAuthObj', fireAuthObj)
  <% } %>

  <% if (options.services.realtimeDb) { %>
  const fireDb = firebase.database()
  const fireDbObj = firebase.database
  inject('fireDb', fireDb)
  inject('fireDbObj', fireDbObj)
  <% } %>
...

Fetch data from Firestore (SSR)

When i try to read the database with fetch, $fireStore is undefined. Do i miss something ?

How to read firestore with asyncData or fetch ?

Have a nice day :)

Update peer dependency for firebase@6

With the release of firebase 6.0.0 (and now 6.0.1) nuxt-fire's peer dependency is not met if firebase is upgraded.

Unless there's some reason for the peer dependency to be at 5.10.0 could it get updated?

Add a nice error message if Firebase is not installed

If Firebase is not installed, the following error message appears:

ERROR  Failed to compile with 10 errors                                                                                   friendly-errors 19:43:30

These dependencies were not found:                                                                                         friendly-errors 19:43:30
                                                                                                                           friendly-errors 19:43:30
* firebase/analytics in ./.nuxt/nuxt-fire.js                                                                               friendly-errors 19:43:30
* firebase/app in ./.nuxt/nuxt-fire.js                                                                                     friendly-errors 19:43:30
* firebase/auth in ./.nuxt/nuxt-fire.js                                                                                    friendly-errors 19:43:30
* firebase/database in ./.nuxt/nuxt-fire.js                                                                                friendly-errors 19:43:30
* firebase/firestore in ./.nuxt/nuxt-fire.js                                                                               friendly-errors 19:43:30
* firebase/functions in ./.nuxt/nuxt-fire.js                                                                               friendly-errors 19:43:30
* firebase/messaging in ./.nuxt/nuxt-fire.js                                                                               friendly-errors 19:43:30
* firebase/performance in ./.nuxt/nuxt-fire.js                                                                             friendly-errors 19:43:30
* firebase/remote-config in ./.nuxt/nuxt-fire.js                                                                           friendly-errors 19:43:30
* firebase/storage in ./.nuxt/nuxt-fire.js                                                                                 friendly-errors 19:43:30
                                                                                                                           friendly-errors 19:43:30
To install them, you can run: npm install --save firebase/analytics firebase/app firebase/auth firebase/database firebase/firestore firebase/functions firebase/messaging firebase/performance firebase/remote-config firebase/storage

We could check in nuxt-fire if Firebase is installed, and if not break throw a nice error message explaining that the user has to install Firebase him/herself.

Feedback Needed: initAuth

With v2.4.0 we implemented the initAuth feature that starts the onAuthStateChanged() listener and defines vuex mutations/actions that will be called when authStateChanged.

In my case this feature is helping me reduce boilerplate code in my applications, since I don't have to manually set up a firebaseClientInit.js plugin with the same code in every application.

I haven't had enough time to test it properly, but it works very well for me so far. I put it in experimental mode since I couldn't test every case, so I would be happy to hear your thoughts of it and if you see any way to improve it (e.g. better error handling?).

The code is simple, it's basically just injecting a plugin as seen here.

Any feedback is welcome, even if it works perfectly for you. Thanks :)

Missing App configuration value apiKey projectId appId for firebase-messaging-sw.js template

Hello,

I use this only for firebase-messaging / handling notifications in my application.

but I found the provider.ts problem: 109 Uncaught FirebaseError: Installations: Missing App configuration value: "projectId" (installations / missing-app-config-values).

which makes it unable to register the default service worker like this screenshot below

i u

the solution I found was to add apiKey projectId appId to the firebase-messaging-sw.js templates like the line of code below.

const version = options.firebaseVersion
const apiKey = options.apiKey // i add this line
const projectId = options.projectId // i add this line
const appId = options.appId // i add this line
const messagingSenderId = options.messagingSenderId
const onFirebaseHosting = options.onFirebaseHosting

if (onFirebaseHosting) {
  // Only works on Firebase hosting!
  importScripts('/__/firebase/' + version + '/firebase-app.js')
  importScripts('/__/firebase/' + version + '/firebase-messaging.js')
  importScripts('/__/firebase/init.js')
}
else {
  importScripts(
    'https://www.gstatic.com/firebasejs/' + version + '/firebase-app.js'
  )
  importScripts(
    'https://www.gstatic.com/firebasejs/' + version + '/firebase-messaging.js'
  )
  firebase.initializeApp({
    apiKey, // i add this line
    projectId, // i add this line
    appId, // i add this line
    messagingSenderId: messagingSenderId
  })
} 

does this lead to an issue or am I miss configuration?

Using Firebase Authentication on server-side (SSR) / Nuxt Universal Mode

This issue is here for...

• collecting insight, approaches and use-cases for achieving SSR with Firebase auth.
• As a reminder to eventually create either a working demo, documentation or helper function that could be delivered within nuxt-fire.

Investigate: Possibility to use nuxt-fire in ServerMiddleware

Problem

ServerMiddleware are ran before executing Nuxt render. So there is currently no way to access the context and therefore nuxt-fire in a ServerMiddleware (as is the case with any other module).

If for some reason someone wants to use Firebase in a ServerMiddleware (e.g. dynamically rendering a sitemap outside of nuxt.config.js), one would have to initialize Firebase separately only for the ServerMiddleware.

This use case is rare, but it so happens to exist.

Solution

unclear - investigate

Code splitting for spesific service

We know firebase bundle is too big so, I think we can add support for code splitting. I have try to add code splitting with async/await in plugin.js and its works. You can check the pr

How to use this in middleware?

I am trying to use middleware router for authentication guards. Is it possible to use this inside Nuxt middleware?

Was v2.5.5 created incorrectly on NPM?

Hi, just trying to update my app to use v2.5.5 of this package.

It looks like that tag doesn't exist on NPM, but v2.4.5 does. GitHub doesn't have v2.4.5 though, only v2.4.4 and v2.5.5.

Did the version on NPM miss the major version bump?

Cheers

Nuxt Generate finished but did not exit

This may not be an issue, but might be more of a question. When I run npm run generate I get the following error:

⚠ Nuxt Warning 

The command 'nuxt generate' finished but did not exit after 5s
This is most likely not caused by a bug in Nuxt.js
Make sure to cleanup all timers and listeners you or your plugins/modules start.
Nuxt.js will now force exit

DeprecationWarning: Starting with Nuxt version 3 this will be a fatal error  

I am not using Vuex, but I am using the onSnapshot method, which is what I have narrowed the issue down to. It appears that the onSnapshot method uses a listener which is causing the error. So I looked at the firebase docs and read the following - link:

var unsubscribe = db.collection("cities")
    .onSnapshot(function (){
      // Respond to data
      // ...
    });

// Later ...

// Stop listening to changes
unsubscribe();

So I tried to save the snapshot to something like this.destroySnapshot, then in the beforeDestroy lifecycle hook, call this.destroySnapshot(). However, when I run npm run generate again, it still gives me the same error.

So my real question is, is this an issue with Nuxt, Firebase, or me being a total noob? I am specifically worried about the line saying Starting with Nuxt version 3 this will be a fatal error

If you want to see my code, it is in my nuxt-sandbox repo.

And more than anything, thank you for creating Nuxt-Fire.

Add Remote Config service

Firebase has release remote config beta for web. You can see this link.

Happy coding 🚀 🚀 🚀

Do you have any tutorial on Deploying Nuxt app to Firebase?

@lupas This is not a bug. Didn't know where to ask so asking here.

Do you have any Nuxt 2 SSR projects hosted on Firebase?

I am struggling from last 48 hours :( Tried many tutorials and videos and blog posts. all are outdated I believe. so just trying my luck here

Thanks you

EmailAuthProvider undefined

I'm trying to reauthenticateAndRetrieveDataWithCredential in a flow that is allowing the user to update their email address like this;

Re-authenticate a user
https://firebase.google.com/docs/auth/web/manage-users#re_authenticate_a_user

However, how to get the credential is missing. This seems to be a popular answer.

How to create “credential” object needed by Firebase web user.reauthenticate() method?
https://stackoverflow.com/questions/37811684/how-to-create-credential-object-needed-by-firebase-web-user-reauthenticate-m#37812541

let credential = this.$fireAuth.EmailAuthProvider.credential("[email protected]", "password1234");

app.js:5350 Uncaught (in promise) TypeError: Cannot read property 'getCredential' of undefined

I noticed another issue

Provide Shortcut to AuthProviders & other Utils
#10

which states;

Below "util" functions are not yet accessible via nuxt-fire, so one has to import import firebase from 'firebase/app' manually where needed.

....

and probably many more...

I wondering if EmailAuthProvider is one of those "util" functions that are not yet accessible and if so how to make it so that it is?

thank you

Passing context to Vuexfire firestoreAction

Hello,

I'm looking for a way to pass the context to a firestoreAction.

Here's my code:

import { user } from "@/store/modules/user";
import Vue from "vue";
import Vuex from "vuex";
import { vuexfireMutations } from "vuexfire";

Vue.use(Vuex);

// interface IStoreType {
//   user: any;
// }

export const strict = false;

// Declare empty store first
export const store = new Vuex.Store<any>({});

export const mutations = {
  ...vuexfireMutations
};

export const modules = { user };

export const actions = {
  nuxtServerInit({ dispatch }, ctx) {
    if ((this as any).$fireAuth === null) {
      throw "nuxtServerInit Example not working - this.$fireAuth cannot be accessed.";
    }

    if (ctx.$fireAuth === null) {
      throw "nuxtServerInit Example not working - ctx.$fireAuth cannot be accessed.";
    }

    if (ctx.app.$fireAuth === null) {
      throw "nuxtServerInit Example not working - ctx.$fireAuth cannot be accessed.";
    }

    console.info(
      "Success. Nuxt-fire Objects can be accessed in nuxtServerInit action via this.$fire___, ctx.$fire___ and ctx.app.$fire___"
    );

    /** Get the VERIFIED authUser from the server */

    const ssrVerifiedAuthUser = ctx.res.verifiedFireAuthUser;
    const ssrVerifiedAuthUserClaims = ctx.res.verifiedFireAuthUserClaims;

    if (ssrVerifiedAuthUserClaims) {
      console.info(
        "Auth User verified on server-side. User: ",
        ssrVerifiedAuthUser,
        "Claims:",
        ssrVerifiedAuthUserClaims
      );

      dispatch(
        "user/fetchUser",
        {
          uid: ssrVerifiedAuthUser.uid
        },
        { root: true }
      );
    }
  }
};

import { firestoreAction } from "vuexfire";

export const user = {
  namespaced: true,
  state: { authUser: null },
  // mutations: {},
  actions: {
    fetchUser: firestoreAction(async ({ bindFirestoreRef }, { uid }) => {
      // this.$fireStore is not defined
      const ref = this.$fireStore.collection("Users").doc(uid);
      await bindFirestoreRef("authUser", ref, {
        wait: true
      });
    }),

    handleSuccessfulAuthentication({ dispatch }, { authUser, claims }) {
      // Install servicerWorker if supported on sign-in/sign-up page.
      if (process.browser && "serviceWorker" in navigator) {
        navigator.serviceWorker.register("/firebase-auth-sw.js", {
          scope: "/"
        });
      }

      dispatch("fetchUser", {
        uid: authUser.uid
      });
    },

    checkVuexStore(ctx) {
      if (this.$fireAuth === null) {
        throw "Vuex Store example not working - this.$fireAuth cannot be accessed.";
      }

      alert(
        "Success. Nuxt-fire Objects can be accessed in store actions via this.$fire___"
      );
      return;
    },

    async signInWithEmailAndPassword({ dispatch }, { email, password }) {
      await this.$fireAuth.signInWithEmailAndPassword(email, password);
    },

    async signInWithEmailLink({ dispatch }, { email, link }) {
      await (this as any).$fireAuth.signInWithEmailLink(email, link);
    },

    async logoutUser({ commit, dispatch }) {
      try {
        await this.$fireAuth.signOut();
      } catch (e) {
        // Do nothing, not properly signed in anyway.
        console.error(e);
      } finally {
        // Reset store
        commit("RESET_STORE");
      }
    }
  },
  getters: {
    isLoggedIn: state => {
      try {
        return state.authUser.id !== null;
      } catch {
        return false;
      }
    }
  }
};

The problem occurs when I dispatch user/fetchUser in nuxtServerInit.
As you can see when I dispatch user/fetchUser this.$fire___ is defined but user/fetchUser does not have access to it.

Add to firebaseopensource.com

Someone suggested that we add your project to firebaseopensource.com
firebase/firebaseopensource.com#117

If that's something you're interested in, just file an issue on our GitHub and follow the instructions!

firebase keys are being sent to client - not secure

It appears the firebase keys are being sent to client. How is this secure?

Size it adds

Hi there,

I did some investigating today and nuxt fire adds 421 KiB to the project with using 'auth', 'functions', 'storage' and 'realtimeDb'

Is there a way to minimize these added KiBs?

Thanks so much,
Maarten

Initialize Firebase Authentication Providers

Create an option initializeAuthProviders: true that would initialize each auth provider and inject it into the context as $fireAuthProviders.

Something like this:

/** Initialize Firebase Auth Providers */
const fireAuthProviders = {
  facebook: new firebase.auth.FacebookAuthProvider(),
  twitter: new firebase.auth.TwitterAuthProvider(),
  google: new firebase.auth.GoogleAuthProvider()
}
inject('fireAuthProviders', fireAuthProviders)

Maybe with an option to specify which auth providers should be initialized, e.g.:

initializeAuthProviders: ['facebook','twitter']

fatal error after adding nuxt-fire and running yarn dev

I followed your exact instructions with yarn add, updating by nuxt.config file. When I run yarn serve, I get the following fatal error:

Error: (Nuxt-Fire) Options are missing or empty, add at least the Firebase config parameters in your nuxt.config.js file.

My nuxt-fire config is exactly copied from your main github page.

'nuxt-fire',
    {
      config: {
        apiKey: 'AIzaSyALn_uJ7Z9EsxUOPPqNj8OoKyxRlm8zDh8',
        authDomain: 'order-placing-test.firebaseapp.com',
        databaseURL: 'https://order-placing-test.firebaseio.com',
        projectId: 'order-placing-test',
        storageBucket: 'order-placing-test.appspot.com',
        messagingSenderId: '843018056570',
        appId: '1:843018056570:web:6ad6f650a5baada270dcc3'
      },
      services: {
        auth: true // Just as example. Can be any other service.
      }

Add support for Firebase Analytics

Now that Firebase supports analytics for web apps (What's new at Firebase Summit 2019) it would be nice to include support for it in Nuxt-Fire.

What is the main difference with vuex-easy-firestore?

I noticed there are two similar projects. I'm new to development. What's the main difference between this project and https://github.com/mesqueeb/vuex-easy-firestore ?

Thank you.

FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).

Hello There!

I have an issue with my Safari Desktop and Safari iOS. I keep receiving the following error message in the console "FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).". In the nuxt.config.js. file I only use the following functions --> "useOnly: ['auth', 'firestore', 'functions', 'storage']". I don't know how to get around this issue. I hope you have better idea how to fix it. Thanks in advance!

This browser doesn't support the API's required to user the firebase SDK.

As seen on this Stack Overflow Question

The error message under WebKit is the following: "FirebaseError: Messaging: This browser doesn't support the API's required to user the firebase SDK. (messaging/unsupported-browser)"

Investigate what could be the issue.

Apps fail to load when Firebase Messaging is used in Safari

Currently Nuxt-fire does not check to see if Firebase Messaging is actually supported before instantiating it. This causes Safari to throw an Environment Not Supported exception which basically kills app loading.

Would be nice to get the check added so we don't have to fork nuxt-fire for our internal use. Thanks for maintaining this great package!

$fireAuth not accesible from nuxtServerInit

I am trying to access nuxt-fire instance within app, yet its not there.

async nuxtServerInit ({ dispatch},{ req ,app}) {
    ....
    app.$fireAuth.auth()
});

Cannot read property 'auth' of undefined

Logging app confirms lack of instance.

Investigate: webpackMode (& webpackMode eager)

Investigate:

1. If there is any gain from adding the option to select webpackMode per dynamic import
2. If using webpackMode : eager instead of static imports makes more sense (cleaner code, other benefits?)

(as suggested by @pimplie in #63 (comment) ).

Show an example how to do auth in universal mode

I've tried reading some issue's and overal nuxt articles but am i right saying that you currently cant auth your user when using ssr (univeral mode) on the server? I don't want anyone to get access to certain parts of my website unless they are authed.. doing this clientside seems to me you would be able to fake being logged in?

Feature Request: Vuexfire integration example

I recently tried to couple this nuxt-fire module to create a firestore instance that the vuexfire module could use to start the automatic 2-way binding of the firestore to the vuex state.

However it seemed I was able to access this.$fireStore in the bindFirestoreRef() function called when initiating vuexfire.

But within the same vuex store module before adding the vuexfire integration calling this.$fireStore worked without issue.

I know this isn't an issue with nuxt-fire or probably even vuexfire I'm sure it's something in my setup and I haven't made it far enough yet to the kind of guy who can quickly setup a codepen/debugging environment.

So I thought I would just rather request being that syncing the contents of the fire-store is the next natural step to take after using this library to so easily initialize firestore some documentation on how to use these tools together could help jumpstart a lot of new projects.

Provide Shortcut to AuthProviders & other Utils

Problem

Below "util" functions are not yet accessible via nuxt-fire, so one has to import import firebase from 'firebase/app' manually where needed.

Product	"Util"
Auth	new firebase.auth.FacebookAuthProvider()
Auth	new firebase.auth.TwitterAuthProvider()
Firestore	firebase.firestore.FieldValue.serverTimestamp()
Firestore	new firebase.firestore.GeoPoint()
Firestore	firebase.firestore.FieldPath.documentId()

and probably many more...

Solution

Nuxt-fire could include this.$firebase as well, so the user could access these functions directly without having to import firebase/auth.

We could also include an option to toggle that:
includeFirebaseApp: true

Enable Persistence Flag

Add a flag to Firestore options to easily enable persistence:

• https://firebase.google.com/docs/firestore/manage-data/enable-offline

$fireDb is undefined

I'm trying to utilise the Firebase Database element in Nuxt Vuex, I have a function that runs, however, I'm getting:

Cannot read property '$fireDb' of undefined

I've imported everything in Nuxt Config, and my function is:

function createNewAccount (user) {
  const databaseRef = this.$fireDb.ref(`accounts/${user.uid}`)
  return databaseRef.set({
    displayName: 'Test Display Name', // use part of the email as a username
    email: 'My Test Email',
    image: 'Some Image' // supply a default profile image for all users
  })
}

export const actions = {
...
}

Location selection for functions

At the moment there is no way to select region.
var functions = firebase.app().functions('us-central1');

this can be somehow specified in the initial config. Are PR of such sort welcome?

Nuxt.js + nuxt-fire + Framework7

Hey there!
Thanks for awesome module.
I have Nuxt + Framework7 (nuxt7) + Cordova Android app
What I do:

yarn add firebase nuxt-fire
yarn run dev

Then I got this error in console:

These dependencies were not found:                    friendly-errors 17:18:59
                                                      friendly-errors 17:18:59
* core-js/modules/es6.array.fill in ./node_modules/framework7-vue/components/stepper.js
* core-js/modules/es6.array.find in ./.nuxt/client.js, ./node_modules/framework7-vue/components/page.js and 56 others
* core-js/modules/es6.array.from in ./node_modules/framework7/components/range/range-class.js
* core-js/modules/es6.array.iterator in ./.nuxt/client.js
* core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./node_modules/framework7-vue/components/list.js and 5 others
* core-js/modules/es6.function.name in ./.nuxt/index.js, ./node_modules/dom7/dist/dom7.module.js and 10 others
* core-js/modules/es6.number.constructor in ./node_modules/framework7-vue/components/nav-left.js, ./node_modules/framework7-vue/utils/mixins.js and 9 others
* core-js/modules/es6.number.is-finite in ./node_modules/template7/dist/template7.esm.js
* core-js/modules/es6.number.is-nan in ./node_modules/framework7/components/color-picker/modules/rgb-sliders.js, ./node_modules/framework7/components/navbar/navbar.js and 5 others
* core-js/modules/es6.object.assign in ./.nuxt/index.js
* core-js/modules/es6.object.freeze in ./node_modules/dom7/dist/dom7.module.js
* core-js/modules/es6.object.keys in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Navigation/Menu.vue?vue&type=script&lang=js& and 26 others
* core-js/modules/es6.object.to-string in ./.nuxt/index.js, ./.nuxt/components/nuxt-link.client.js and 30 others
* core-js/modules/es6.promise in ./.nuxt/index.js     friendly-errors 17:18:59
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js, ./node_modules/framework7/components/autocomplete/autocomplete-class.js and 3 others
* core-js/modules/es6.regexp.match in ./.nuxt/client.js, ./node_modules/dom7/dist/dom7.module.js and 7 others
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./api/auth.js and 26 others
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js, ./node_modules/framework7-vue/components/searchbar.js and 2 others
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./api/user.js and 26 others
* core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js, ./node_modules/framework7-vue/components/card.js and 5 others
* core-js/modules/es6.string.bold in ./node_modules/framework7-vue/components/actions-label.js, ./node_modules/framework7/components/actions/actions-class.js and 1 other
* core-js/modules/es6.string.fixed in ./node_modules/framework7-vue/components/page.js
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 others
* core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./node_modules/framework7/components/app/app-class.js and 2 others
* core-js/modules/es6.string.link in ./node_modules/framework7-vue/components/fab.js
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js
* core-js/modules/es6.string.small in ./node_modules/framework7-vue/components/button.js
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js
* core-js/modules/es6.symbol in ./.nuxt/utils.js, ./.nuxt/components/nuxt-link.client.js and 2 others
* core-js/modules/es6.typed.float32-array in ./node_modules/framework7/utils/bezier.js
* core-js/modules/es7.array.includes in ./.nuxt/store.js, ./.nuxt/components/nuxt-link.client.js and 2 others
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Navigation/Menu.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es7.promise.finally in ./.nuxt/client.js
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/axios.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/web.dom.iterable in ./.nuxt/axios.js, ./.nuxt/components/nuxt-link.client.js and 29 others
                                                      friendly-errors 17:18:59
To install them, you can run: npm install --save core-js/modules/es6.array.fill core-js/modules/es6.array.find core-js/modules/es6.array.from core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.number.is-finite core-js/modules/es6.number.is-nan core-js/modules/es6.object.assign core-js/modules/es6.object.freeze core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.bold core-js/modules/es6.string.fixed core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.link core-js/modules/es6.string.repeat core-js/modules/es6.string.small core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es6.typed.float32-array core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

Then I tried to do this:

yarn add @firebase/app
yarn add @firebase/firestore
yarn add @firebase/auth

And this gave me nothing(

Any ideas?

Add Firebase Performance

Add firebase performance to nuxt-fire.

See here:
https://firebase.google.com/docs/perf-mon/get-started-web

A cookie associated with a cross-site resource at http://firebasestorage.googleapis.com/

Hello Pascal Luther,

Thank you very much for this wonderful package. I'm a big fan of it and I am really enjoying it.

I have spoken with regards to the same issue back in early November last year. I have updated my Nuxt to 2.11.0 and I'm using yo Nuxt-Fire 3.5.5. I'm also using the latest firebase-tools 7.9.0.

I'm getting the following warning in the browsers:

"A cookie associated with a cross-site resource at http://firebasestorage.googleapis.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032."

I don't know if the warring is related to this package but I have some difficulties loading(previewing)/uploading Images and other files form Firestore on both Chrome and Mozilla. The application that I'm experiencing these issues is a web platform that we are using at my workplace everyday.

I hope we can find some solution and fix the problem.

Thank you in advance.

Use Plugin-Utils for proper error logging during build process

Problem

If build fails (e.g. due to missing or insufficient config), we throw a console.error(e). This does not break the build process and is also not really visible for the user, so he might easily miss it and can't figure out what's wrong.

Solution

Use Plugin-Utils for proper error logging during build process.

Intellisense / AutoPredict

Hi,
Ive been using nuxt-fire and so far so good.
One small gripe, not a bug is that the Intellisense / AutoPredict / Completion is not working with my IDE.
In my case, webstorm.

I presume this is because the module is extending this / app and webstorm doesn't understand the context.

Cannot find module '.nuxt/nuxt-fire/firebaseServerAuth.js'

Hello, i'm having issue with nuxt-ts when running nuxt-ts build.
It works fine in dev but fail when i build.

Stack:

  Error: Cannot find module '.nuxt/nuxt-fire/firebaseServerAuth.js'
  Require stack:
  - node_modules/@nuxt/core/dist/core.js
  - node_modules/@nuxt/cli/dist/cli-command.js
  - node_modules/@nuxt/cli/dist/cli.js
  - node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js
  at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:569:31)
  at Server.useMiddleware (node_modules/@nuxt/server/dist/server.js:727:66)
  at Server.setupMiddleware (node_modules/@nuxt/server/dist/server.js:680:12)
  at Server.ready (node_modules/@nuxt/server/dist/server.js:610:5)
  at Nuxt._init (node_modules/@nuxt/core/dist/core.js:655:7)

Config:

  /*
   ** nuxt-fire module configuration
   */
  fire: {
    config: {
      apiKey: process.env.apiKey,
      authDomain: process.env.authDomain,
      databaseURL: process.env.databaseURL,
      projectId: process.env.projectId,
      storageBucket: process.env.storageBucket,
      messagingSenderId: process.env.messagingSenderId,
      appId: process.env.appId,
      measurementId: process.env.measurementId
    },
    services: {
      auth: {
        initialize: {
          onSuccessAction: "User/handleSuccessfulAuthentication",
          ssr: true
        }
      },
      firestore: true,
      functions: true,
      performance: true,
      analytics: true
    }
  }

What did i missed?

Cannot read property 'development' of undefined

Hi!

This module is not working with latest nuxt version.
Error message:

FATAL Cannot read property 'development' of undefined 16:26:26

at ModuleContainer.nuxtFire (node_modules/nuxt-fire/index.js:23:48)
at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:190:34)
at promise.then (node_modules/@nuxt/utils/dist/utils.js:1802:43)

(node:86421) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'development' of undefined
at ModuleContainer.nuxtFire (/Users/danielhendricks/Apps/admin.ruklinikken.no/admin.ruklinikken.no/node_modules/nuxt-fire/index.js:23:48)
at ModuleContainer.addModule (/Users/danielhendricks/Apps/admin.ruklinikken.no/admin.ruklinikken.no/node_modules/@nuxt/core/dist/core.js:190:34)
at promise.then (/Users/danielhendricks/Apps/admin.ruklinikken.no/admin.ruklinikken.no/node_modules/@nuxt/utils/dist/utils.js:1802:43)
(node:86421) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:86421) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Any workarounds? Thank you :)

Help Needed to Add Data to Firestore

@lupas Thank you very much for this package.

I have started using this, I did not get a example to achieve the below, your example mostly had adding record with ID, I am planning for auto populate ID.

I am planning to use Vuex to retrieve and add my data to FireStore.

Currently I have given read write public access to my firestore.

I do not have a fancy way of coding, I am still a new to all these, as in I do not have much experience. So my code below might look ugly. Apologies for that.

I need help in adding the data to my collection and get this data added back to my list of recipes.

What I have achieved till now -
I can access my data that is get list of recipes on my index page using below (Vuex code further below)

import { mapState, mapActions } from 'vuex'
computed: mapState({
    recipes: state => state.recipes.recipesList
  }),
  created() {
    this.fetchRecipes()
  },
  methods: {
    ...mapActions({
      fetchRecipes: 'recipes/fetchRecipes'
    })
  }

I am stuck at this stage now.
Page - AddRecipe

import { mapActions } from 'vuex'

methods: {
       ...mapActions({
      addRecipe: 'recipes/addRecipe'
    }),
    onSubmit: function(e) {   
      console.log(this.title)
      e.preventDefault()
      this.addRecipe(this.title)
    }
  }

I am getting the success alert and I can see data getting added but it is failing

store/recipes.js

export const state = () => ({
  recipesList: []
})

export const getters = {
  // allRecipes: state => state.recipes
}

export const actions = {
  async fetchRecipes({ commit }) {
    const recipeArray = []
    const response = this.$fireStore.collection('recipes')
    try {
      await response
        .where('publish', '==', true)
        .orderBy('created', 'desc')
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            recipeArray.push(doc.data())
          })
        })
      commit('setRecipes', recipeArray)
    } catch (e) {
          // alert(e)
      alert('Error Fetching Data, please contact Webmaster')
    }
  },

  async addRecipe({ commit }, title) {
    const response = this.$fireStore.collection('recipes')

    try {
      await response
        .add({
          title: title,
          slug: title,
          publish: true,
          created: new Date()
        })
        .then(res => {
          // eslint-disable-next-line no-console
          console.log('Added document with ID: ', res.id) //This is printing data on console
           commit('addRecipe', res.data)
        })
    } catch (e) {
     
      console.log(e)

      alert(e)
      return
    }
    alert('Success.')
  }
}

export const mutations = {
  setRecipes: (state, recipesList) => (state.recipesList = recipesList),
  addRecipe: (state, recipe) => state.recipesList.unshift(recipe)
}

I hope you will be able to help me here. Thank you very much.

Missing $firePerf on index.d.ts

I think you forgot to add add the property to typescript definition

How to connect store/index.js

Not found $fireAuth

nuxtServerInit({ dispatch }) {
     const user = this.$fireAuth.currentUser
     dispatch('auth/setUser', user)
}

Investigate: Jest + Nuxt + Nuxt-Fire is failing in test suite

As seen on this Stackoverflow post by Maarten Raaijmakers:
https://stackoverflow.com/questions/53885177/jest-nuxt-nuxt-fire-is-failing-in-test-suite?rq=1

When I launch my test I get this error [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'ref' of undefined"

It looks like the this.$fireDb is not called. The module is normally loaded in nuxt.config.js. How can I make this work?

Investigate if we can do something to make it work with Jest. Any contribution welcome.

Twitter Authentication with nuxt-fire

Does this plugin support Twitter login with Firebase & Nuxt ?
Couln't find anything in the code example / docs.

Thanks

Unmet dependancy errors

Hi I'm facing some challenges using this module. After installing nuxt-fire, I got errors that firebase was missing so I yarn add firebase. Now, I'm getting core-js errors like this..

` ERROR Failed to compile with 34 errors

These dependencies were not found:

• core-js/modules/es6.array.find in ./functions/.nuxt/client.js
• core-js/modules/es6.array.iterator in ./functions/.nuxt/client.js
• core-js/modules/es6.date.to-string in ./functions/.nuxt/utils.js, ./functions/.nuxt/components/nuxt.js
• core-js/modules/es6.function.name in ./functions/.nuxt/index.js
• core-js/modules/es6.object.assign in ./functions/.nuxt/client.js
• core-js/modules/es6.object.keys in ./functions/.nuxt/utils.js
• core-js/modules/es6.object.to-string in ./functions/.nuxt/router.scrollBehavior.js, ./functions/.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.promise in ./functions/.nuxt/client.js
• core-js/modules/es6.regexp.constructor in ./functions/.nuxt/utils.js
• core-js/modules/es6.regexp.match in ./functions/.nuxt/client.js
• core-js/modules/es6.regexp.replace in ./functions/.nuxt/utils.js, ./functions/.nuxt/components/nuxt.js
• core-js/modules/es6.regexp.search in ./functions/.nuxt/utils.js
• core-js/modules/es6.regexp.split in ./functions/.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./functions/.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
• core-js/modules/es6.regexp.to-string in ./functions/.nuxt/utils.js, ./functions/.nuxt/components/nuxt.js
• core-js/modules/es6.string.includes in ./functions/.nuxt/client.js, ./functions/.nuxt/components/nuxt-link.client.js
• core-js/modules/es6.string.iterator in ./functions/.nuxt/utils.js
• core-js/modules/es6.string.repeat in ./functions/.nuxt/utils.js
• core-js/modules/es6.string.starts-with in ./functions/.nuxt/utils.js
• core-js/modules/es6.symbol in ./functions/.nuxt/utils.js, ./functions/.nuxt/components/nuxt-link.client.js
• core-js/modules/es7.array.includes in ./functions/.nuxt/client.js, ./functions/.nuxt/components/nuxt-link.client.js
• core-js/modules/es7.object.get-own-property-descriptors in ./functions/.nuxt/index.js
• core-js/modules/es7.promise.finally in ./functions/.nuxt/client.js
• core-js/modules/es7.symbol.async-iterator in ./functions/.nuxt/client.js, ./functions/.nuxt/components/nuxt-link.client.js
• core-js/modules/web.dom.iterable in ./functions/.nuxt/axios.js, ./functions/.nuxt/components/nuxt-link.client.js

To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable`

Chrome Warning - A cookie associated with a cross-site

I recently started receiving this Warning in my Google Chrome Console -->

"A cookie associated with a cross-site resource at http://firebasestorage.googleapis.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032."

Is it something that I need to worry about?

movePluginBeforeInitAuthPlugin throws error if a plugin is defined as a string and not as an object

movePluginBeforeInitAuthPlugin() throws an error if plugins are defined only as strings and not as objects, because we currently filter by x.src.

This fails:

plugins: [
      '@/plugins/pluginToMove',
    ],

    extendPlugins(plugins) {
      movePluginBeforeInitAuthPlugin(plugins, 'pluginToMove.js')
      return plugins
    },

This works:

plugins: [
      { src: '@/plugins/pluginToMove', ssr: false },
    ],

    extendPlugins(plugins) {
      movePluginBeforeInitAuthPlugin(plugins, 'pluginToMove.js')
      return plugins
    },

We can improve the function to handle both cases.

Suggestion: Add localhost test option for cloud functions

Hi, I have changed it for myself, but maybe it might be helpful to add "functions().useFunctionsEmulator()" for functions support, something like
if (options.services.functions.localTest) { fireFunc.useFunctionsEmulator('http://localhost:${options.services.functions.localTest}') }