Nuxt.js: SPA Build 404 on refresh dynamic route

[packytagliaferro]

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 tomysite.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?

_{This question is available on Nuxt community (#c9507)}

[cmty[bot]]

This issue as been imported as question since it does not respect nuxt.js issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt.js/issues/c9507.

[gcaseres]

@packytagliaferro Have you found a solution for this issue?
I have the same problem and I can't find documentation for this case.

[manniL]

Use generate.fallback and point your webserver to that fallback html as a catch all route. https://nuxtjs.org/api/configuration-generate#fallback

[claudiobonfati]

You should setup your server to always request your spa's index.html for all routes that are not a file.

.htaccess

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) index.html [QSA,L]
</ifModule>

_OR_

nginx.conf

  ...
  location / {
      try_files $uri $uri/ /index.html;
  }

After doing this you can reload any page, static or dynamic.