Deploying Vue with Netlify, from scratch

Netlify is a great platform for vue apps. You can simply do a git push, and they will automatically build and deploy it for you. They also have a great free tier available.

Deploying Vue on Netlify is mostly straightforward:

1: Create the Vue app

For this example I’m going to use Vue CLI, so make sure have that installed.

vue create vue-sample

I chose the default settings and used npm as package manager.
After it was created you can run the sample with

cd vue-sample
npm run serve

2: Connect with Netlify

Netlify can deploy from Github, Bitbucket or GitLab, so push your code to one of those. Then its time to create a new site with Netlify:

Choose your repo, then continue to the main settings:

The build command is what Netify will run after code is pushed. npm run build will put the generate files under the dist/ folder, so we tell Netlify to publish that directory.

At this point your site will be live, and even better a new version will automatically be deployed every time to push to master! There are some last steps though to get everything working.

3: Setup redirect rules

While the homepage works nicely, at the moment going directly to any inner page will result in a 404. To fix this lets first create a route to see the issue:

vue add router

Commit and push these changes to master, and Netlify will deploy the new version automatically. You should see an About link at the top of your site:

If you refresh the page directly though you currently get an 404.

To fix we need to setup custom rewrite rule. Create a file named _redirects under the public/ folder with the following contents:

/*    /index.html   200

This will effectively serve the index.html for any route under your site. Putting it in the public/directory means it will end up in dist/ after npm run build, which is what we want.

Now push this to master and you are done!