Deploying a Vue App with Netlify

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 theNetlify 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.