vuejs api fetch code example

Example 1: vue fetch api

async created() {
  // GET request using fetch with async/await
  const response = await fetch("https://api.npms.io/v2/search?q=vue");
  const data = await response.json();
  this.totalVuePackages = data.total;
}

Example 2: how to use axios in vue

//Install Axios from terminal
npm install axios
//Import Axios in your HelloWorld.vue
import axios from 'axios'
//Add a method to implement Axios
test () {
      axios.post('URL')
      .then(function (response) {
        alert (response.data);
      })
      .catch(function (error) {
        alert(error);
      });
    }

Example 3: fetch in vue 3

# http requests using Fetcht api in Vue 3 explained (see videos below) 
https://www.youtube.com/watch?v=-Aoyja_BjZY
https://www.youtube.com/watch?v=LvOYCjpMQ10

Example 4: vuejs list items from axios

<ul>
    <li v-for="food in foods">
        <h2>{{food.name}}</h2>
        <ul>
              <li v-for="nutrient in food.nutrients">{{nutrient.nutrient_id}}</li>
        </ul>
    </li>
</ul>


axios.get(url).then(response => { 
    this.foods = response.data.report.foods
})

Example 5: how to use api url in vue

<a :href="post.url" target="_blank"><img :src="post.image_url"></a>