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 Tools

In order to enable the deployment and configuration of your application to Firebase you will first need to ensure you have the firebase tools installed.

Firebase tools are Firebase Command Line Interface (CLI) Tools that are used to:

• Deploy code and assets to your Firebase projects
• Run a local web server for your Firebase Hosting site
• Interact with data in your Firebase database
• Import/Export users into/from Firebase Auth

You can simply install firebase-tools globally using the npm pacakge

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.

Initialise your project for Firebase

In order to initialise your project with firebase you will first need to ensure you login Firebase using your registered Google Account and then use the init command.

To do so open your terminal window, and run the following command

Complete the questions asked, to gain a better understanding of this process take a read through Understand Firebase projects

After the command has completed you will notice 2 additional files in your project folder.

• .firebaserc
• firebase.json

The .firebaserc file will contain you project configuration information and should look something similar to this.

Your firebase.json will contain your deployment configuration and will look something similar too:

Add Configuration information

We need to add all our configuration details for the Firebase services we are going to use.

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.

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.

Configuring Firebase for use

We are now almost ready to start implementing firebase in our Vue Project. We just need to install one last package named VueFire to do so execute the following command in your terminal window

Once the installation is complete we need to configure the application to make use of it. So edit your main.js file to import the module and configure Vue to use it as follows

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.

Summary

We have now configured our application to make use of Firebase in our Vue Application, you now may want to check How to use Firebase Authentication with Vue to explore how to make use of this easy to use and implement functionality provided by Google Cloud Computing platforms to enable you to quickly develop real time applications.