How to pass props to a page?

[primal elbow]

Hi,
I'm migrating my vue app to Nuxt and facing an issue with my page component using a prop. I I've seen the exact same question on stackoverflow, however it wasn't answered for Nuxt3.
https://stackoverflow.com/questions/60443520/how-to-pass-props-to-a-page-in-nuxt

Thats the page component:

// //pages/[id]/index.vue
<script setup lang="ts">
const props = defineProps<{
    id: string
}>()

console.log('id is ', props.id) // undefined
</script>

<template>
...
</template>

I want to avoid using the route.params solution (bad practice). Are there any other possibilities?

[undone sinew]

Why is route.params considered bad practice?

[primal elbow]

Its described here in the first section: https://router.vuejs.org/guide/essentials/passing-props.html

Using $route or useRoute() in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs. While this is not necessarily a bad thing, we can decouple this behavior with a props option.

--> Thight coupling of router and component

Well you could argue, that a page component will not be reused accross the application, however I thought if there is a better way (like in my Vue-only solution).

[dusky raft]

That's about using it in a component. Router and the page are quite tight already, right? 😛 If it's a component dedicated to the page, it's there for a reason.. You could just bind the route params from page level into the component and leave the component unaware of the route and page if reusability is a thing.

[halcyon bloom]

I think exactly like @dusky raft . The guide is about not linking components to the router. This does not necessarily include pages at nuxt.

The guide is not about “vue components”, but rather about the concept of the atomic/dumb component.

even if you wanted to reuse a page 1 to 1 like this, you would probably write the complete content as a separate component and then use components in both routes and feed them with the respective props from the route