Vue/nuxtJS slug: 404 on refresh

Greetings everyone!

I have linked up DatoCMS to my Vue website using this guide:

On local it works perfectly; if I go to a blog post, it goes to the correct /post/this-is-a-slug and displays the post. When I refresh the page, it still displays the correct post.

However, when I deploy the website on Netlify with the exact same build command and public dir, I can still access the posts like normal, but when I refresh the post page, it 404’s and I have to go back to the blog page and then click on the correct post to see it again.

Link: stadsadvocaat.netlify.com -> Blog in menu -> Random post -> Refresh

I have been Googling around, but since the behaviour works as expected on local and not on Netlify, I am not really sure how to solve this.

Someone else have experience with this or know why this behaviour works different on Netlify?

Hi @Greatness, it looks like you have a single page app (SPA). Have you read through this community post about adding a redirects rule to get that working? Feel free to comment there if you have questions or run into any issues. Thanks!

1 Like

Dear Dennis,

Thank you very much for your reply and sorry for my late one.
I do indeed have a SPA, however, I also use Nuxt to build static pages.

On local the pages get built properly and thus the slugs work, but on Netlify (despite running the same build command), the posts still seem to be generated dynamically upon request.

It works, however, on simple pages like /privacy/, but my DatoCMS pages don’t get built during deploy.

Have you heard of this problem before? Is this a problem with Netlify or with my code?

Hmm, could you tell us a URL that doesn’t work, and let us know what local file you see serving that content so we can investigate the contents of your deploy?

I have heard of this but it’s usually solved by Dennis’ advice (but in most of those cases there is no “local copy” of the files differing from our deploys as you assert - just a local webserver that routes correctly as ours can once you configure it :wink:

Hi @Greatness ,

I think you’re issue relates to using Nuxt generate with dynamic routes, which don’t work out of the box as the Nuxt docs describe

Dynamic routes are ignored by the generate command.

Those docs also contain an example of how to tell Nuxt which pages to generate for the dynamic routes. In your case, you can configure something like this in your nuxt.config.js:

export default {
  generate: {
    routes: [
      '/post/mr-van-de-week-mousa-ichoh',
      '/post/coffeeshops-hebben-niet-een-eeuwigdurend-recht-op-gedoogverklaringen',
      '/etc'
    ]
  }
}

Your other pages like /blog/ and /privacy/ can be statically determined by Nuxt because those routes don’t contain any parameters. So that’s why those were already pre-rendered.

Hope that helps!

thanks for helping @jbmoelker!

Hey there! I have an article that goes over how to create dynamic routing in a Nuxt application such as this one, along with a demo you can explore. Hope it helps!

1 Like