Search code examples
javascriptvuexnuxt.jsvuex-modules

asyncdata function not rendering vuex data on sever side

After fetching data from vuex store in asyncData() function and checking page source. Data is not showing on page source. 

<template>
<div>
  <p>{{title}}</p>
</div>
</template>

<script>
  export default {
    asyncData({params, store}) {
       return { title: store.state.category.title };
  }
</script>

Page source result

<p>[]</p>

The expected result should be

<p> My Category Title </p>

Is there any fault in my understanding of asyncData() function?

Solution

  • After a little bit of research. I came to know that using nuxtServerInit(). We can populate the store directly from the server. If you are using a module pattern you can use it only in store\index.js file. Now if I am fetching vuex store data I can see it in my component page source. The best part of it is that if you refresh the page then again nuxtServerInit() automatically run and populate the store as per the logic defined in this.