Nuxt 404 Page on Refresh of page

Question

I am new to Nuxt. I have made one static site that turned out great but now making a site with dynamic content (like a blog). I would have a structure like so:

->posts/
-->index.vue
-->_slug.vue

When running npm run dev I can go to mysite.test/posts/slug-1 and I get the page I want. If I refresh I still get that page I want.

The issue comes when I build it. I use npm run build --spa (not generate, I know generate creates static files and I would have to make a static file for each post). Now if I go to mysite.test/posts/ and click on a post, it navigates to mysite.test/posts/slug-1 and it works. If I go to the URL directly or refresh, it does not?

The site clearly says SPA mode works with dynamic routes, but it from what I see it only works to navigate to them, not direct link?

yes, you need to setup a proxy that will proxy request to index.html. — Aldarund
@Aldarund is there any docs on this? Seems like something that should be mentioned when using the SPA function — Packy
it is how any spa app works in the world. You can google it via spa nginx configaration for exmaple and its totally depends on how u host your app — Aldarund

spjy spjy · Accepted Answer · 2020-03-08T07:44:35

Nuxt does not know what dynamic routes you have, and therefore you need to specify them in the generate configuration option in nuxt.config.js. Read more here.

You would do something like this:

export default {
  generate: {
    routes: [
      '/posts/slug-1',
      '/posts/slug-2',
      '/posts/slug-3'
    ]
  }
}

After doing this, it will no longer give you a 404 on the dynamically routed pages if you refresh.

Nuxt 404 Page on Refresh of page

1 Answers