Nuxt•15mo ago

Calling child function in dynamic route [id].vue

I am trying to call a function in my current Nuxt page from my NavBar.

This works fine when I am just using normal pages

<NuxtPage ref="page" />

<NuxtPage ref="page" />

<NuxtPage ref="page" />

<NuxtPage ref="page" />

in template and:

const page = ref(null)
  page.value.pageRef.foo()

const page = ref(null)
  page.value.pageRef.foo()

const page = ref(null)
  page.value.pageRef.foo()

const page = ref(null)
  page.value.pageRef.foo()

in my app.vue file

However if instead the page is a dynamic route. Put inside a folder projects as [id].vue
The same code doesn't work. Even though I am using defineExpose({foo}) from the [id].vue file

Any ideas? I tried to see if I could extract it from a deeper layer of the "page.value.pageRef" object but it just returns a proxy object and I can't seem to extract anything

Help is much appreciated or thoughts on better ways to communicate from a button in nav with a nested page route (I don't really want to send data back and forth through the pages)

Thanks

AxelSorensenOP•10/6/24, 10:14 PM

Ok, I actually ended up solving this!
So if anyone has the same issue:

It doesn't work if you use the dynamic route structure
pages/projects/[id].vue

But it does work if you use:
pages/projects/[id]/index.vue

Calling child function in dynamic route [id].vue

Similar Threads

Similar Threads

Similar Threads