Vue app not routing correctly when deployed

Hello, I’m new to Vue and Netlify. I just created a small website and for some reason I can not access any pages besides the home page. I know about the docs regarding History Mode but I am not using any server in my app. Does anyone know how to fix this?

Welcome to our community, Ruby!

I think you may be missing this configuration:

https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

Could you give it a try and see if it helps out?

1 Like

I will definitely give this a try! Sorry for the rookie question, but where exactly do I implement that code?

I’m using Bitbucket and Yarn if that helps.

You’ll want to end up with that directive in an _redirects file which lives next to index.html after your project is built. I am not intimately familiar with Vue so not sure if you can “start out” with it in dist/ (assuming that is where your project is built to) or if you’d want to do something else like:

  • if there is a separate “static assets” folder that you can put things like a favicon.ico in, you could try putting it there.
  • you’d need to copy it in place afterwards from a different location; some static site generators prefer that. In that case you’d use a pattern like yarn run build && cp redirects.txt dist/_redirects as a build command (after creating /redirects.txt with the right content, and replacing yarn run build with whatever you actually use to build).

Hopefully one of those patterns can help, but let us know if not and perhaps link us to your build logs to help us give more specific advice in that case as well :slight_smile:

Thank you so much for your help and time. I really appreciate it!

The solution was to add the ‘redirect’ file to the ‘public’ folder (that also has index.html).

The code I had in the redirect file - /* /index.html 200

3 Likes

Happy to help! Thank YOU for the very specific follow-up with your solution and marking it as a solution! That will help others in your situation discover this information on their own, which is a large portion of why we put so much staff effort into community responses - to make them “google-able” so folks can discover previous answers that are relevant to their situation without waiting for our help.

Kudos for a “perfect landing” on your first participation in the community :smiley:

2 Likes

Thanks a lot for answers in this thread @ruby @fool! I was worried it would be much harder to do this, but this worked like a charm!

2 Likes

I have a follow up to this question. The app I’m building has an authentication system where upon sign up the user is sent a confirmation email that has dynamic parameters (eg. https://example.com/confirm/__uid/__token/) where the Vue component, upon creation, submits a post request with the variable uid and token which then activates the account. My question is: do I need to manually set up a rewrite for every route I want to be able to route to or is there some config that I can set up where any route will be picked up and I can tell the Vue router to go to the passed path?

If I need to manually set up each rewrite can someone provide an example of how one sets up a rewrite with dynamic parameters, in a manner similar to what I described above?
Edit: cancel this last question, I just found this: https://docs.netlify.com/routing/redirects/redirect-options/#query-parameters

Ir works like a charm.

For VUE: reate a file _redirects in the public folder with:

/* /index.html 200

Thank you! :slight_smile: