Nuxt 3 + Supabase: targetUserId undefined in Chat Component

#vue #javascript #help

Hi everyone,

I’m building a real-time chat feature using Nuxt 3 and Supabase. My goal is to have a DM system similar to Discord. I’m passing currentUserId and targetUserId as props from a page to a Chat.vue component, but I keep running into the same issue:

handleSend: targetUserId is undefined!

Even though the URL has the correct UUID of the friend (/me/dm/), when I try to send a message in the chat component, targetUserId is undefined. I’ve tried:

Using watch on props to detect when they are available.
Using v-if="currentUserId && targetUserId" before mounting .
Logging route.params.id in the parent page — it shows correctly on onMounted.

Everything seems fine in the parent, but inside the Chat component, the prop is undefined at the time handleSend is called. I suspect it might be related to Nuxt 3 SSR / hydration timing, but I’m not sure.

Here’s a snippet from my parent page:

<Chat
  v-if="currentUserId && targetUserId"
  :currentUserId="currentUserId"
  :targetUserId="targetUserId"
/>

And in Chat.vue component:

const props = defineProps({
  currentUserId: String,
  targetUserId: String
})

const handleSend = () => {
  if (!props.targetUserId) {
    console.error('handleSend: targetUserId is undefined!', props)
    return
  }
  sendMessage(props.targetUserId)
}

I’ve been debugging for hours and still can’t figure out why targetUserId is undefined in the component, even though the URL is correct and v-if should prevent mounting too early.

Has anyone faced a similar issue in Nuxt 3? Could it be an SSR timing problem, or am I missing something obvious about passing props?

Any advice or workarounds would be greatly appreciated.

Thanks!