How to Install Firebase with Vue.JS

Firebase is a real-time cloud infrastructure for client-side apps, which enables developers to turn any Front-end  framework application like Vue, React, Angular, iOS or Android into a full-stack product capable of scaling infinitely in the cloud.

Firebase abstracts away most of your complex server-side features like:

  • Authentication
  • File Storage
  • Messaging
  • Data Persistence
  • Machine Learning
  • Micro-services

Enabling you to focus on building an awesome experience for end users.

In the example of How to use Firebase Authentication with Vue in this post we will focus on how to register Firebase and the associated services to you Vue.JS app.

I will assume you have started a new Vue.JS project and your project is making use of Vuex and Router .

Install Firebase into Vue Project

In order to use firebase in our project we will need to install the following dependencies to our project.


Firebase has now been added to our project. We now need to add all Configuration details. I will assume you have registered and created an application using the Firebase Console and able to get your Configuration Credentials.

We are also going to make use of the concepts and practices discussed in using environment variables in Vue.JS we are going to create some environment variables to store our credentials values.

In our .env.development.local add the following variables, ensure you also get the values from your Firebase Console.

Plain Text

We can create a new folder in our src directory to store some new additonal files we will create. We will call this new folder firebase


The first file we are going to create in the new file to access our our credential information.


Open the credentials.js and add the following code, which basically get our values we placed in the environment files.


Create a new file which will actually create an instance to the firebase dependency and use the configuration credentials we just created.


Add the following code to this file, which will initialise the firebase application with the configuration details.


We can now create a new file which we will use to create an instance of the Authentication module.


You will notice we import the app.js we just created and create a constant of Auth which will be how we reference the authentication module in our code.


Create a new file which we will use to create an instance of the Firestore database module.


Add the following code to create a constant which will be used when we want to reference the Database in our application.


and lastly we will create a new file which will be used to create an instance of the Storage Module


the code in the file follows the similar process as previous creates a constant of Storage we will use to access the storage module.


We have now completed our Firebase configuration work, now if you want to use a Firebase feature in our code you just need to import the relevant file and everything will be ready for use.

Gary Woodfine

Technical Director at Denizon
Gary is Technical Director at Denizon, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scalable in a way which helps them address and reduce their ecological impact.

Denizon's product line successfully integrate IoT, Artificial Intelligence and Blockchain technology to enable efficient, productive, secure and scalable solutions to help organisations address increasing energy demands, ecological impact and Health & Safety concerns of their staff.

Latest posts by Gary Woodfine (see all)