Nuxt.js: Pass props to nuxt-child

[mathieutu]

What problem does this feature solve?

Hi,
I have nested routes.
In the container I'm doing some actions to fetch api, write in store, create computed objects, etc..
I need them in the container, but I also need them in the children pages.
It would be really cool to be able to pass props to children pages to avoid to re-do all this operations on all the nested pages.

Thanks!

What does the proposed changes look like?

// container
<div>
   <UserInfos :user="user">
   <Tabs>
   <nuxt-child :user="user"/>
</div>

// nested
props: {
   user : {}
},

_{This feature request is available on Nuxt.js community (#c6920)}

[lucpotage]

If we could have nested layouts, it could solve your issue I suppose?

[mathieutu]

@lucpotage hem... Sorry I don't see the link with nested layout. 😕

[lucpotage]

@mathieutu OK, I thought that layout data was automatically passed to the pages depending on it but it's not the case.

It seems the store is the only solution to your problem: https://github.com/nuxt/nuxt.js/issues/1894

[cmty[bot]]

This feature-request has been implemented by @Atinux, @clarkdo.

This works in latest nuxt-edge

pages/child.vue:

<template>
  <nuxt-child :test="'RESOLVE_PLZ'"/>
</template>

pages/child/index.vue:

<template><h1> DO IT! </h1> </template>
<script>
export default {
  props: ["test"],
  mounted(){
    console.log(this.test) //RESOLVE_PLZ
  }
}
</script>

[mathieutu]

Thank you guys!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.