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 :

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:

To:

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

Let's say you have a component name Signup.vue and intend to use Firebase Authentication in it.

Your import statement should look like this:

This will get rid of the warning.

Instructor/Owner of SoftAuthor! http://softauthor.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store