Merging the data

As we mentioned before, the asynchronous data from the asyncData method will be merged with the component data from the data method or the data property. That means that if you have set some default data in your component data with the same object keys in the asyncData method, they will be overwritten by the asyncData method as a result. Here's an example:

// pages/merging-data.vue
<p>{{ message }}</p>

export default {
  data () {
    return { message: 'Hello World' }
  },
  asyncData (context) {
    return { message: 'Data Merged' }
  }
}

In the preceding code, Nuxt will merge the two sets of data and you will get the following result on your screen:

<p>Data Merged</p>

You can find the examples in /chapter-8/nuxt-universal/koa-nuxt/understanding-asyncdata/ in our GitHub repository.

Next, we will look at how we can make use of the context object that we can access from the asyncData method in the coming section.