Nuxt 3 Post Detail page with id and slug as url

[nimble walrus]

I have an Nuxt 3 project
How can I create a Detail page for the Products with id and slug as its url.
The url should have this pattern:

/product/{product.id}/{product.attributes.Slug}/

I added my code in a attached markdown file.

[loud edge]

You'll want to look into Dynamic Routes: https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes

Set up your folder/file structure in pages directory (ie. /product/[pid]/[slug].vue
Then access with route.params.pid & route.params.slug after defining const route = useRoute()

[nimble walrus]

so it's all about the folder structure and I don't need to worry about routing?

[loud edge]

Yes, you can opt into manual config routing but defaults to folder structure routing.