Nuxt•4w ago

dynamic route getRouterParams not updated

Hey all! I have a server setup like so in the attached screenshot. When I call getRouterParam and use the string slug, the value comes back as undefined but when I use the string id it works. I had previously had the file called id but realized that wasn't accurate so I updated it. Has anyone hit this before? Is it that the file name won't update the Nuxt API? It's working so not a big issue, but I'd like to make sure my code is readable. this is how I'm using it now:

const slug = getRouterParam(event, "id")

const slug = getRouterParam(event, "id")

but I'm pretty sure it should be

const slug = getRouterParam(event, "slug")

const slug = getRouterParam(event, "slug")

since the file is now [slug].get.ts. Thanks in advance!

2 Replies

kapa.ai•4w ago

Hi @jbrundagejr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with dynamic route parameters in Nuxt. The problem you're experiencing is likely related to how Nuxt handles dynamic route parameters. In Nuxt 3, the format for defining dynamic routes is different from Nuxt 2. According to the Migration guide for Pages, where you previously used _id to define a dynamic route parameter, you now use [id]. In your case, you've renamed the file from [id].get.ts to [slug].get.ts. However, it seems that the internal routing mechanism might not have updated to reflect this change. This could explain why getRouterParam(event, "id") works, but getRouterParam(event, "slug") returns undefined. To resolve this issue, you might want to try the following: 1. Make sure you've cleared any caching mechanisms that Nuxt might be using. 2. Restart your Nuxt development server. 3. If the issue persists, you might need to update other parts of your code where the route is defined or used to ensure consistency with the new parameter name. Additionally, you might want to consider using the newer getValidatedRouterParams function, which provides additional type safety. According to the H3 utils documentation, you can use it like this:

export default defineEventHandler((event) => {
  const params = getValidatedRouterParams(event, (data) => {
    return "slug" in data && typeof data.slug === "string";
  });
});

export default defineEventHandler((event) => {
  const params = getValidatedRouterParams(event, (data) => {
    return "slug" in data && typeof data.slug === "string";
  });
});

This approach allows you to validate the presence and type of the slug parameter. If you continue to face issues, it might be worth creating a minimal reproduction of the problem and seeking help through the Nuxt GitHub Discussions or by reporting a bug if you believe it's a Nuxt-specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@698190063892168774> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

dynamic route getRouterParams not updated

Did you find this page helpful?