Middleman with vue-router loading 'Page Not Found' on page reload

Question

I'm building a website that uses Middleman (Ruby) on the backend and VueJS on the front end, along with vue-router to handle routing. In my vue-router index, I'm loading the Video component on /chapter/:id as you can see here:

const routes = [
  {
    name: 'chapter',
    path: '/chapter/:id',
    component: Video,
    props: true
  },
]

Everything is working as expected when you click on a <router-link> - but when you reload the page (for example: /chapter/2) it loads 'File Not Found' from Middleman.

Is there something in Middleman to disable routing?

Any help would be greatly appreciated! Thanks

Answer 1

Configure your backend to return index.html when the requested address is chapter/:id , or, whenever it's not an address in your backend api list.

When we use a single-page-app built with vue, we are always in index.html , which has a app.js or something running all along, and when the route changes, the script detects that and change the page content, but we never left index.html . So when we reload the page, the browser requests a document/html from the server, when the html arrives with the js script inside it, the script runs, determines what to show due to the address/route, and we are up and going fine.

So in your case, just need to fix the "make sure the browser gets the html file when visiting /chapter/:id " part.