DEV Community

Cover image for Add Firebase To Your Vue JS App
Raja Tamil
Raja Tamil

Posted on

Add Firebase To Your Vue JS App

In this Vuejs tutorial, You’re going to learn how to add Firebase to your Vue JS 2 web app in minutes with STEP by STEP instructions.

Create Vue JS Project using Vue CLI

STEP 01: First you need to install Node.js & NPM (Node Package Manager) onto your computer if you haven’t done so already.

Check to see if you have installed node with the following command on the Terminal / Command Prompt:

node -v
Enter fullscreen mode Exit fullscreen mode

STEP 02: Install vue using vue cli globally (-g) which is the easiest way to get started with Vue.

npm install -g vue-cli
Enter fullscreen mode Exit fullscreen mode

STEP 03: Initialize Vue Project via Web Pack with the following command and change my-project to your project name.

vue init webpack my-project
Enter fullscreen mode Exit fullscreen mode

Next, you will be asked a series of questions:

  • Project name (yourprojectname) – The name must be URL friendly (no space)
  • Project description (A Vue.js project)
  • Author (SoftAuthor)
  • Vue build (Use arrow keys) ❯ Runtime + Compiler: recommended for most users
  • Install vue-router? (Y/N) Yes
  • Use ESLint to lint your code? (Y/N) No
  • Set up unit tests (Y/N) No
  • Setup e2e tests with Nightwatch? (Y/N) No
  • Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM

Once you hit enter, it will start downloading and installing dependencies which will take a minute or two.

After that cd to your project.

cd yourprojectname
Enter fullscreen mode Exit fullscreen mode

Then,

npm run dev 
Enter fullscreen mode Exit fullscreen mode

At this stage, your project will be compiled and Vue will give you the localhost address. Go ahead and launch it on the browser.

If you already have a Gmail account, go to the Firebase Console and log in.

Once you have logged in, you will see the project explorer window like the image below.

⚠️ It may look a bit different depending on when you read this article.

Choose Add Project Button

alt text

Create project name of your choice and click continue

Continue Reading

Discussion (0)