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

you have to use camelCase in JavaScript part

<script>
export default {
  props: [
    'basketCount'
  ]
}
</script>

To pass data between components of page, another way is to use a Vuex Store https://nuxtjs.org/guide/vuex-store/