How to pass props to <nuxt /> component pages

Question

Has anyone been able to pass props to pages in Nuxt.js?

Typical Vue.js props can be passed as so:

// parent-component.vue


<child-component :basket-count="items.length"/>

<script>
import ChildComponent from './child-component'
export default {
  data () {
    items: [{}, {}]
  },
  components: {
    childComponent: ChildComponent
  }
}
</script>


// child-component.vue


<p>You have {{ basketCount }} items in your basket</p>

<script>
export default {
  props: [
    'basket-count'
  ]
}
</script>

But when using the <nuxt /> tag in a layout default.vue, props do not get passed to the children pages as they should.

Discussion has taken place already here, but the ticket appears to have no conclusion. I cannot yet troubleshoot a working means of achieving this.

Will post back, but curious to know thoughts from Nuxt.js devs on this?

Answer 1

Use NuxtChild

Just Use NuxtChild instead of Nuxt and you can directly pass everything to the pages/compnents that are loaded. Docs

so in layout do something like this

  <div id="app">
    <Header />
    <SocialMedia />
    <main>
      <NuxtChild :myPropNameHere="prop data here" />
    </main>
    <Aside />
  </div>