Home

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 ()?