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:
On the url bar, paste wonderful-gates-27a024.netlify.com/blog and hit enter.
I'm getting page not found error
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
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.
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
Related
I am deploying my website powered by vue vith vue-router(history mode) to gituhb pages using vite builder.
So I got a problem: Github Pages is returning 404 error each time I reloading the page with non-root path.
Adding cp dist/index.html dist/404.html seems like solution. The page is displaying correctly but GitHub is returning 404 status. And this is an important problem because search engines skipping paths in my sitemap.xml that returns 404 status code. That is, all non-root paths.
I'm preparing to deploy my first Static app from a Nuxt.js 2 project.
While the static routes are generated fine, my dynamic routes are not. Once I remembered they were hidden in my dropdown menu - duhh - I created a /generate page which renders all my dynamic routes using the nuxt-link component. My assumption was that the crawler should find the /generate/index.vue page and thus the links on it, and crawl those.
It didn't.
Then I noticed a comment from Sebastien Chopin mentioning that SSR should be enabled when generating Static apps. Ok. So I re-enabled SSR and I've hit nothing but errors. A couple I've figured out but this latest one has got me stumped.
Some googling has not revealed a clue that appeared relevant - or at least I didn't recognise them as relevant - so I need the 'worldwide developers' team help.
Does this error suggest there's an issue in Vue itself? I don't use 'self' anywhere in my app code soooo... hmmm?
Cheers,
Jeremy
Well it's generating now (has been for a few weeks, been a busy time!)... however the generated pages are not outputting with content, but I think that's a different issue.
My configuration currently is;
target: 'static',
ssr: false,
generate: {
minify: false, // Nuxt 2.15.4 > Deprecated next major version > Use build.html.minify instead!
routes: dynamicRoutes
}
I'll keep working on it.
I started out by following microsoft tutoral here which results in one solution and two projects (vue as frontend and api as backend)
Current setup:
Vue 2
.Net 6
It is located at C:/Projects/project_name
Directory layout:
- project_name.sln (solution file)
-- project_nameFrontend (frontend)
-- project_nameBackend (backend)
-- .vscode
The problem is when I open it in C:/Projects/project_name, some of the front end code will show error.
e.g. the following line will result in "couldn't find module #/helpers/interceptors"
import { instance } from '#/helpers/interceptors';
If I open in "C:/Projects/project_name/project_nameFrontend" (where node_module is), no errors.
I know the errors are due to npm, and the parent folder doesn't know where node_module is.
The reason I want to open it in parent directory so I can debug the API backend code as well as the front end at the same time.
Is there a work around for this?
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.
I have a angular 2 SPA running from within a SharePoint 2010 document library. However, I have a problem with routing. When I start the application by running "index.html", the link in the browser shortly displays:
<server>/scripts/angular_app/index.html
When the application is loaded it changes to:
<server>/scripts/angular_app/#/information-system
'information-system' is the default route of my application.
So far, so good.
If I do a reload of the page now, SharePoint loads its default view:
<server>/scripts/angular_app/Forms/AllItems.aspx
This is because the routing removes the 'Index.html' from the url and SharePoint loads the default which is 'AllItems.aspx' and not 'index.html'.
Is there any way of telling the angular 2 routing system to leave the 'index.html' bit in the url?
Thanks for any help!
Joachim
I added following line to index.html to keep index.html in the URL all the time:
<base href="/index.html">
I solved my issue by extending the base href with the filename at compile time:
ng build --dev --bh /scripts/filingangular/index.html
I was not aware that you could put an actual filename here.