3

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

  • Navigate to about
  • Navigate to contact
  • Navigate to blog (Sometimes the error shows on this step)
  • Click on an article
  • Navigate back to the blog (here it should display not found)

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

I'm getting page not found error

anieves
  • 51
  • 1
  • 1
  • 5

3 Answers3

1

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
Ninth Autumn
  • 461
  • 1
  • 5
  • 10
  • Thanks for the quick response @ninth-autum. I did the changes but the same thing happens once it's deployed. While it's on localhost works just fine. I also tried moving `Blog.vue` to `blog/` and changing its name to `index.vue`, then created a `_uid` directory inside `blog/` and added the `_uid.vue` with the name of `index.vue`, that way it's more structured. Again, works perfect on localhost, except when deployed it does not. The latest changes are already on the staging link: **https://agnelnieves-staging.netlify.com/** – anieves May 31 '19 at 15:39
  • if it works in your local file than did you build/generate before deploying? – Ninth Autumn May 31 '19 at 15:50
  • alos show me the nuxt-link, that you use to link in about link, I'm guessing something is wrong there. – Ninth Autumn May 31 '19 at 15:53
  • 1
    Ahh, I think I found the issue. Lol Nuxt by default does not generate dynamic routes (bummer). I have to tell it to generate them. **Reference:** https://nuxtjs.org/guide/commands/#production-deployment I'll check it out and update this thread once it's resolved. Thanks again for the help. – anieves May 31 '19 at 20:25
1

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.

agm1984
  • 15,500
  • 6
  • 89
  • 113
0

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

Phil Snow
  • 124
  • 2