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="/...

Nuxt•17mo ago•

8 replies

Theiaz

How to pass props to a page?

// //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="/...

How to pass props to a page?

Similar Threads

How to pass props to a page?

Similar Threads

Similar Threads

Similar Threads