[Vuejs]-Parent component is not getting data from child in Nuxt app

by

0👍

As stated on the Nuxt documentation:

This hook can only be placed on page components.

That means asyncData only works on components under pages/ folder.

You have several options:

  1. You use fetch instead. It’s the other asynchronous hook but it’s called from any component. It won’t block the rendering as with asyncData so the component it will instanciated with empty data first.
  2. You fetch your data from the page with asyncData and you pass the result as a prop to your component
<template>
  <div>
    <Hero />
    <Releases :releases="rfhreleases" />
    <About />
    <Contact />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const rfhreleases = await $content('releases', params.slug)
      .only(['artist'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      rfhreleases,
    }
  },
}
</script>

Leave a comment