Nuxt•12mo ago

dynamic route getRouterParams not updated

Hey all! I have a server setup like so in the attached screenshot. When I call

getRouterParam

getRouterParam

getRouterParam

getRouterParam and use the string

slug

slug

slug

slug, the value comes back as

undefined

undefined

but when I use the string

id

id

it works. I had previously had the file called

id

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")

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")

const slug = getRouterParam(event, "slug")

const slug = getRouterParam(event, "slug")

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

Screenshot_2025-01-08_at_12.07.37_PM.png

kapa.ai•1/8/25, 5:10 PM

Hi @jbrundagejr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•1/8/25, 5:10 PM

----------------------
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_id to define a dynamic route parameter, you now use [id][id].

In your case, you've renamed the file from [id].get.ts[id].get.ts to [slug].get.ts[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")getRouterParam(event, "id") works, but getRouterParam(event, "slug")getRouterParam(event, "slug") returns

undefined

undefined

.

To resolve this issue, you might want to try the following:

Make sure you've cleared any caching mechanisms that Nuxt might be using.
Restart your Nuxt development server.
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 getValidatedRouterParamsgetValidatedRouterParams 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

slug

parameter.

kapa.ai•1/8/25, 5:10 PM

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•1/8/25, 5:10 PM

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

dynamic route getRouterParams not updated

Similar Threads

Similar Threads

Similar Threads