Create Nuxt.js list with async data & axios

You can do this based on Nuxt asyncData and the context guide, i.e.:

export default {
  async asyncData(context) {
    let response = await context.app.$axios.$get(`http://jsonplaceholder/`)
    return { posts: response } 
  }
}

Explaining more sid heart's reply: Function name is "asyncData" not async data. You are using async await you can use like this:

import axios from "axios";
export default {
  // Also define data function and define posts property
  data() {
    return {
      posts: {}
    }
  },

  async asyncData () {
    let { data } = await axios.get(`http://jsonplaceholder/`)
    return { posts: data } // Console: property post is not defined
   }
}

According to Nuxt.Js documentation, async asyncData should be written instead of async data and there is no need to import axios and you should get it from the asyncData input parameters.

<li class="item" v-for="post in posts"  v-bind:key="post.id">
  <nuxt-link :to="....">
   {{post.id}}. {{post.title}}
  </nuxt-link>
</li>

export default {
  async asyncData ({ $axios }) {
    const data = await $axios.$get('http://jsonplaceholder/')
    return { posts: data } // Console: property post is not defined
  },
}

according to nuxtjs document

  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }

in your case this should be

async asyncData () {
    let { data } = await axios.get(`http://jsonplaceholder/`)
    return { posts: data } // Console: property post is not defined
}

You can use like below ( as per Nuxt and Context docs.)

export default {
   async asyncData({params, app}) {
    const { data } = await app.$axios.get(`https://www.yoursite.com/user/${params.id}/`)
    return { posts: data } 
  }
}