Krissanawat Kaewsanmuang
Jul 8 · 3 min read

When you’re ready to get your Vue.js app running live on the internet, you have a few options for deployment, from Heroku to Firebase to Netlify. In this Vue Mastery tutorial, we will look at how simple it can be to deploy your Vue app with Netlify.

Step 1: Create a Vue app

To get started, we will quickly create a Vue app using the Vue CLI. If you don’t yet have the CLI installed, you can do so using yarn or npm:

npm install -g @vue/cli

# OR

yarn global add @vue/cli

Then, we will create a simple Vue app using the following command:

vue create my-vue-app

When prompted, choose the default settings and your package manager (we used npm). Once the app is created, we’ll cd into it and run the project locally.

cd my-vue-app

npm run serve

Step 2: Connect the Vue App with Netlify

Because Netlify offers deployment from Github, Bitbucket or GitLab, we are able to use one of these versioning tools to connect our app to Netlify. In order to do so with Github, we’ll simply create a new github repo for our app, and push our code to it.

Then we’ll head over to Netlify.com and create a free account.

Creating a new site with Netlify

On the Netlify home page, we’ll click Sign up, and do so with Github.

This will allow us to access the repo for our app. Once we’ve signed up, we’ll be redirected to this the Sites page:

Here, we’ll click New site from Git and select Github

Now that we have created our site, we can select our repo, then continue to the main settings.

Configure your Settings

We’re almost ready to build our site. But first, we’ll configure our settings.

We need to make sure that our Directory is set to dist and our build command is yarn run build. Then we can go ahead and click Deploy site. And voila! With a push of this button, our site will be deployed live.

Now, whenever we push to the master branch of our Github repo, a new version of our app will be automatically deployed via Netlify.

What about URLs?

Your site will go live with a Netlify-created URL, but you can also configure a custom URL if necessary. Additionally, you can have as many URLs as you have branches in your Github repository. This can help with project management when you have different version of your app (with different features, for example) living at each branch.

Let’s ReVue

Hopefully you now see how simple it can be to deploy your Vue app using Netlify. If you’re using Nuxt.js, we show you how to deploy your Nuxt app with Vuetify in our entire Scaling with Nuxt.js course, over on VueMastery.com.

Vue Mastery

The ultimate learning resource for Vue.js Developers

Krissanawat Kaewsanmuang

Written by

React native passionate developer, Coffee addict https://kriss.io

Vue Mastery

The ultimate learning resource for Vue.js Developers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade