by Sai gowtham

How to deploy a Vue app to Netlify

In this tutorial, we are going to learn about deploying a Vue.js app to netlify hosting.

Netlify provides us a free hosting to host our single-page apps or modern websites, it turns your code repository into a website with continuous integration and continuous deployment.

We are deploying our Vue app to netlify hosting in 4 steps.

Step 1

Create a new GitHub repository and push your vue app to that repository.

vue-app-netlify-repo

Step 2

Now open netlify.com in your browser and signup using GitHub.

netlify-signup

Step 3

Once you successfully signed up using GitHub now click on new site from git button, on next page netlify asks for continuous deployment choose GitHub because our vue app code is in GitHub.

Now pick a vue app code repository you want to deploy on netlify like in the below image.

pick-vue-repo

Step 4

Now you need to enter a build command and publish directory like in the below image and click on Deploy site button.

vue-netlify-build-command

Once you completed all the above steps now click on Preview button to see your vue app live URL.

vue-app-netlify-preview

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course