Nuxt.js: Feature Request asyncProps

[smoonsf]

What problem does this feature solve?

Inside setup function of the composition api in Vue 3, we cannot access this.data. It means we cannot use asyncData in composition api. So we need asyncProps api for nuxt page component which merges returning object in props. Only then we can create ref or reactive value with ssr.

What does the proposed changes look like?

import { createComponent, reactive } from '@vue/composition-api'

export default createComponent({
  props: {
    initialUsers: {
      type: Array,
      required: true
    }
  },
  async asyncProps(ctx) {
    const initialUsers = await ctx.$axios.get('/users');

    return { initialUsers };
  },
  setup (props, ctx) {
    const userData = reactive({
      users: [...props.initialUsers],
      page: 1,
    })

    function onClickMore() {
        ctx.root.$axios.get('/users', { params: { page: userData.page+1 }, }).then(res => {
          userData.users = userData.users.concat(res); 
          userData.page = userData.page +1;
        })
    }

    return {
      userData,
      onClickMore,
    }
  }
});

[xmsz]

How does it going ?

[smoonsf]

Now we can solve this issue via fetch hook.
https://composition-api.now.sh/helpers/useFetch.html

Big thanks to @danielroe 👍