Deploying Vue.js app to firebase hosting

Deploying a Vue.js app to Firebase Hosting is fast and easy. Firebase offers speed, SSL security, and easy updates. This guide walks you through setup, build, and deployment steps.

Prerequisites for Deploying Vue.js app

1. Node.js and npm installed
2. A Vue.js project (create with vue create or npm create vue@latest)

3. A Firebase account (free tier works)

Step-by-Step Firebase Hosting Setup for Vue.js

Step 1: Install Firebase CLI and log in.

1. Install Firebase CLI.

Firebase CLI can be installed globally or project level.

To install globally,

npm install -g firebase-tools 

To install project level,

npm install firebase-tools --save-dev

2. Log in to Firebase.

firebase login

//If firebase CLI is installed project level
npx firebase login

Step 2: Initialize Firebase in Your Vue.js project

1. Navigate to the project folder.
2. Run:

firebase init

//If firebase CLI is installed project level
npx firebase init

3. It will ask series of questions.
   • Select Hosting using the spacebar and press Enter.

• Choose Create a new Firebase project or link an existing one.

• Set your public directory as dist (the folder created by npm run build)

• Configure as a single-page app (type y if using Vue Router with history mode and N for hash mode).

• Decline overwriting existing files (type n unless you need to reset configurations).

This creates firebase.json with hosting rules. Your configuration file will look like this.

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Step 3: Build Your Vue.js App for Production

1. Run:

npm run build

This generates a dist folder with optimized HTML, CSS, and JS.

Step 4: Deploy to Firebase Hosting

1. Run:

firebase deploy

2. Wait for the “Deploy complete” message.
3. Your app’s live URL will appear (e.g., your-project.web.app).

You are done with deploying Vue.js app and visit the URL to test your deployed app.

Related Articles :

Vue.js quick start

Deploying Vue.js app to firebase hosting