How to deploy Vue.js app to Firebase hosting

In this tutorial, you’ll learn how to deploy your app to a free Vue.js hosting on Firebase.

1. Create a production build

First of all, you should have a production/public build of your Vue.js app. It’s usually created by running the following command:

npm run build

It will create a public build in a new folder, usually public/ or dist/. Make sure it exists before proceeding to the next step.

2. Install Firebase CLI

To host your site with Firebase Hosting, you need the Firebase CLI (a command-line tool). Run the following npm command to install or update to the latest CLI version.

npm install -g firebase-tools

3. Create a new Firebase project

Log in to your Firebase admin panel and create a new project.

4. Log in to Firebase using CLI

Now you need to log in to Firebase using previously installed command-line tool. Run the command below and follow the instructions:

firebase login

5. Initialise/sync your Vue.js app

Run the command below and select ‘hosting’ as a sync method and choose your Firebase project from the list.

firebase init

This command will generate two config files: .firebaserc and firebase.json.

6. Deploy Vue.js app to Firebase

The last step is deploying the app to Firebase. Run the command below to deploy your app.

firebase deploy

The command above will transfer your public/ or dist/ folder to Firebase hosting and create a new build on Firebase.

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vuejs-firebase-deploy

PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js, how to install Google Analytics tracking code in Vue.js.