Get Rid of Firebase Development Mode Warning in Vue.js

When you’re using Firebase in the Vue JS app, you’ll probably get a warning similar to the screenshot below.

This will happen when you import Firebase anywhere in the project using the following code:

import firebase from "firebase";

When you use the above code, it actually imports all of the firebase products such as Authentication, Storage, etc, available to use right off the bat, even the ones that you do not intend to use.

This can be inefficient as it will add extra Javascript code to the project that is not needed.

Let see how to get rid of this warning.

Instead, you can import only the Firebase service that you intend to use as you need them.

So, in your main.js file replace the following code:

From:

import firebase from "firebase";

To:

import firebase from "firebase/app";

Then, you can add the two lines mentioned in the warning message to your Vue component.

Lets say you’ve a component name Signup.vue and intend to use Firebase Authentication in it.

Your import statement should look like this:

import firebase from "firebase/app";
import "firebase/auth";

This will get rid of the warning.