Nuxt.js: asyncData and hot reload

[jakeg]

Say I have the following Vue page file in a Nuxt app:

<template>
  <div>
    <p>{{foo.bar}}</p>
    <p>{{blah}}</p>
  </div>
</template>

<script>
  import axios from '~/plugins/axios'
  export default {
    data () {
      return {
        blah: 'abc'
      }
    },
    async asyncData ({ params }) {
      let { data } = await axios.get(`/path/to/${params.id}`)
      return {
        foo: data // data = { bar: 'fgh', baz: 'ijk' }
      }
    },
  }
</script>

This works fine with both client-side and server-side rendering. However, if I'm editing/saving the file with hot-reload I'll get an error because (I assume) foo isn't defined in the data () method and it doesn't re-call the asyncData() method on hot-reload, so this.$data.foo stays undefined.

One solution to this is to add foo to the return value of data (), but that seems wrong as it would only be used on hot-reload in dev mode, yet the object would be sent to all clients in the file.

Is there a better solution to this which enables hot-reloading to work on pages which use asyncData ()?

_{This question is available on Nuxt.js community (#c1957)}

[martinesdevelop]

I have some problem too. It causes development more inconvenient when your data getting from asyncData. In previous versions all worked fine.

[PierreRambaud]

👍 same here.

[sebastianks]

As you say so yourself it's possible to "fix" by adding foo to data() property in your component. This, for me, is best practice and gives you more readable code, because you state up-front in your data() what data you have in your component.

So:

data() {
   return {
      blah: 'abc',
      foo: null
   }
}

would be the ideal solution for me.

[PierreRambaud]

Not sure it's the best solution because it's not fix the problem.
Sure you can add a default value, but you must reload the page to perform the asyncData again when you're in dev mode.

[mcapu]

I would agree with @PierreRambaud, this is very much needed for development. asyncData() should be called when hot reloading and, right now, it isn't.

Did anyone find a solution?

[gangsthub]

@mcapu, as a workaround I use the fetch method as an alternative to asyncData to store things in vuex, in those cases where I want to actually store things. This may help in some scenarios. (Note: only available for page components)

[husayt]

@jakeg do you still get this in latest nuxt?

In general it's good to have all asyncdata fields initialised in data()

[PierreRambaud]

@husayt LGTM, just try in many files, with many situations, can't reproduce. Look like everything works fine.
More, I'm agree with you, asyncData fields must be initialized!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.