Nuxt•2w ago

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•2w ago

Why is route.params considered bad practice?

Theiaz•2w 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•2w 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.•2w 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•2w 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•2w 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.

Gaming

Programming

How to pass props to a page?