Nuxt 3 dynamic route not found
I have a problem with nuxt 3 frontend application:
I use nuxt 3 as my frontend and django as my backend and api service. When I run npm run build (it executes nuxt generate) command in local, to get files ready to be send to production, the files like /blog/9, /blog/6, /blog/4 etc. are generated into /.output/public dir. These numbers are posts ids, and posts are fetching from backend using axios, and they are generated because they already exists on backend and are automaticly fetching by nuxt when command is ran.
The thing is, when i enter the domain like https://example.com/blog/9 via button or link on website, that includes the id param, that has been previously generated via npm run build command, it's all good, even with blog posts that have been generated after deploying nuxt files the production server, like https://example.com/blog/12 or https://example.com/blog/27.
But when I enter the url https://example.com/blog/12 manually, not via the link or buttom on the website, it returns me a default 404 error provided by the server, as the post wasn't found.
I want it to automaticly get id param from url and execute the fetch method by axios.
Axios method from Post.vue component:
import axios from 'axios'
export default {
async setup() {
const route = useRoute()
const { data: post } = await axios.get(https://api.example.com/blog/${route.params.id})
}
}
Again, it does everything right when url changes on page directly, but not when it is entered via external link or manually in browser.
3 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@conner thanks. It may work, but it's very unconvincing when you have hundreds of dynamic routes, especially when they have random id like '32512542' and each id is in the route: /blog/[id]/. Please correct me if I am thinking wrong.
Unless you specify what is dynamic and how it should prerender, how is the prerenderer meant to know what dynamic id exists?