Fix Routing Issues for a VueJS App Deployed to Netlify

Had a WTF moment when I deployed a new Vue project to Netlify, only to be confronted with this message when refreshing any route that's not root. It worked just fine locally! Here's how to fix this.

I'm working on a new, fun project called Craftnautica. In short, it's a fansite (crafting helper) for the game Subnautica.

The entire app is a Vue SPA (Single Page App) and because it doesn't require a back-end, I'm hosting it statically on Netlify.

I use Vue Router to build nested routes. A very basic nested route would be https://craftnautica.netlify.com/sn. Navigating to it via a link worked just fine after I deployed the code to Netlify, however, refreshing the page after the fact, produced the error message you see above. And that went on for every nested route in the app.

To make a long story short, I discovered that an easy fix is to inclide a netlify.toml file in the root folder of your app, with the following:

[[redirects]]
  from = "/*"
  to = "/"
  status = 200

Redeploy and all the nested routes and permalinks can be refreshed and accessed individually!

You can read more about Netlify's toml.xml file and how redirects work.