Vue/nuxtJS slug: 404 on refresh

Support
1

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?

3

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
4

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?

5

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:

6

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!

1 Like
7

thanks for helping @jbmoelker!

8

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
9

In our app we wanted on Netlify with nuxt we want to have a /users/:username kinda route. But the users live in firebase so we can’t read\store everone, am I just missing something? So there’s really no such thing as a true dynamic route with nuxt SPA?

10

That is actually exactly what this addresses, I also have a demo that creates dynamic slugs from firebase that’s not quite finished, but the concept is the same.

However, Nuxt just announced their impending release of 3.0 which will have target: static, which will be true dynamic routing in the sense that it will happen “automagically” and need no further setup. That release won’t be out until end of April though.

Dynamic routing and hosting with Netlify will never be supported with the SPA option, though, only Universal.

Hope that helps!

11

That’s just the best news ever though.

Thanks so much for all the hard work, love netlify!

1 Like
12

Awesome! I’ll likely put out a post when their v3.0 goes live to walk folks through it. Cheers Steve! :beers:

13

Though this was almost 2 and half years ago, this was a really helpful hotfix for this exact same issue I was having. Thank you!

1 Like