CODEWITHSUNDEEP
vue.jsnuxt.jsprismic.io
anieves
anieves

Reputation: 51

NuxtJS routing error: Page not found when navigating to an existing route

Just started using Nuxt, and I love it so far. I just have one specific issue, I'm using prismic.io as headless CMS for my personal page. I have a few pages and a "blog" page. I'm having an issue when navigating to the blog route, it returns page not found. Now, it's kind of odd because it's working perfectly in my local host, it's just behaving that way when deployed.

Site's being deployed on Netlify.

I already tried switching the route's links and building the project on my local machine and it's working like charm.

Link to site: https://wonderful-gates-27a024.netlify.com/

This is my file structure for the pages:

Pages/
-- blog/
---- _uid.vue
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue

Steps to replicate the issue

Steps to navigate back to blog after the error shows up:

I'm getting page not found error

Upvotes: 3

Views: 14224

Answers (3)

agm1984
agm1984

Reputation: 17178

We just had this error occur and it was caused by renaming About.vue to about.vue on a MacOS machine.

Git doesn't recognize it as a new file, so when you deploy the app on a Linux machine, the problem occurs.

The solution is to rename the file from a Linux machine, so that git recognizes it.

You could also probably accomplish it by renaming the file from Blog.vue to new-blog.vue and then renaming it again to blog.vue.

This is all caused by the fact that files aren't case sensitive on MacOS but they are on linux. You will see it where you have:

<NuxtLink :to="{ name: 'blog' }">

It must be blog.vue to match the route name because the filename leads to the route name. On Linux, the crawler will name the route "Blog" if it is Blog.vue.

You don't want uppercase filenames with nuxt, because they will lead to URLs such as /Blog. I don't recommend having uppercase in your pages directory.

Upvotes: 1

Phil Snow
Phil Snow

Reputation: 124

We've now released the updated nuxt-prismic module to solve this dynamic routes issue and enable previews. You see how to migrate your project by following this article: https://prismic.io/docs/vuejs/getting-started/the-new-prismic-nuxt-module

Also you can see a project enabled with the module already here: https://user-guides.prismic.io/en/articles/2831943-nuxt-js-sample-multi-page-website-with-navigation

Upvotes: 0

Ninth Autumn
Ninth Autumn

Reputation: 461

It works sometimes because you are navigating to 

https://wonderful-gates-27a024.netlify.com/blog/

Which is different from 

https://wonderful-gates-27a024.netlify.com/blog

the page which is /blog

https://wonderful-gates-27a024.netlify.com/blog

doesn't exist while the page 

 https://wonderful-gates-27a024.netlify.com/blog/

exists. which is /blog/_uid

so if you want it to work make 

Pages/
-- blog/
---- _uid.vue
---- index.vue// make this file and the /blog will work
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue

Upvotes: 1

Related Questions