Why does it does not return any data when using Async with Axios in Nuxt?

Question

I dont get any of the data in my list. When I use the fetch it works (please see the comment code in the script tag), but not when I use the axios.

Here is the code:

<template>
  <div>
    <ul>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mountains: [],
    };
  },
  /*async fetch() {
    this.mountains = await fetch(
      "https://api.nuxtjs.dev/mountains"
    ).then((res) => res.json());
  }, */
  async asyncData() {
    const mountains = await axios.get(`https://api.nuxtjs.dev/mountains`);
    return { mountains };
  },
};
</script>

JSON from https://api.nuxtjs.dev/mountains

Answer 1

In the help documents of Nuxt Axios I found out you need to add $axios as a parameter and add a $ before axios and get. See code below:

  async asyncData({ $axios }) {
    const mountains = await $axios.$get(`https://api.nuxtjs.dev/mountains`);
    return { mountains };
  },

Now it works perfect!

Answer 2

Try not to destructure the response

async asyncData() {
  const mountains = await axios.get(`https://api.nuxtjs.dev/mountains`);
  return { mountains };
},