N
Nuxt•4w ago
Theiaz

How to pass props to a page?

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>
// //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?
Stack Overflow
How to pass props to a page in Nuxt?
All I'm trying to do is pass a parameter to a page in Nuxt. In Vue, it's easy: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> or <router-link to="/...
6 Replies
Cue
Cue•4w ago
Why is route.params considered bad practice?
Theiaz
Theiaz•4w ago
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
Vue Router
The official Router for Vue.js
Theiaz
Theiaz•4w ago
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).
jesse1989pp.
jesse1989pp.•4w ago
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.
Orbis
Orbis•4w ago
I think exactly like @jesse1989pp. . 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
Theiaz
Theiaz•4w ago
Okay, thanks for the explanation. As you mentioned, the coupling between the page and the router is already implicit, so an explicit coupling is no big deal. I'll link this answer in the stackoverflow question for future references.
Want results from more Discord servers?
Add your server