TheLazy.Dev
Portfolio GitHub

Blog

vue |axios |api

Use Axios API with Vue CLI

ljnce

Luca

Posted on July 21, 2020

Use Axios API with Vue CLI

Hi guys, this is a small tutorial for use Axios to call API with Vue CLI.

First step install Axios with command:

npm install --save axios vue-axios
Enter fullscreen mode Exit fullscreen mode

Second step entry file into your main.js file:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
Enter fullscreen mode Exit fullscreen mode

After this, you only need your API link, Axios, and methods you want to call.

You have 2 ways for call axios on your file Vue:

You can use Axios with import on your file Vue like this:

<script>

import axios from 'axios';

//Use **mounted** if you want to print it on the screen.
mounted() {
   AXIOS CALL
}

//Use **methods** if you have @click function.
methods(){
   click() {
    AXIOS CALL
   }
}

</script>
Enter fullscreen mode Exit fullscreen mode

Or simply add this before your Axios call like this:

<script>

this.axios.get()....

</script>
Enter fullscreen mode Exit fullscreen mode

Now you can call your requests:

GET

(All)

axios.get("Api link" , {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
        })
        .then(response => {
            this.datas = response.data
            console.log(response.data);
        })
       .catch(function (error) {
             console.log(error);
        });
Enter fullscreen mode Exit fullscreen mode

GET

(Select by id one of this to show)

axios.get("Api link" , + id {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
        })
        .then(response => {
            this.datas = response.data
            console.log(response.data);
        })
          .catch(function (error) {
             console.log(error);
        });
Enter fullscreen mode Exit fullscreen mode

POST

(You need id and new formData for create new data; you take this from an input with specify v-model for your data)

var formData = new FormData()
formData.append('Your_database_column', this.Your_new_input_v-model)
axios.post("Api link", formData, {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
            })
            .then(function(response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    }
Enter fullscreen mode Exit fullscreen mode

PUT

(You need id and a formData for change the old value; you take this from an input with specify v-model for your edit data)

var formData = {
             role: this.Your_edit_input_v-model,
}
axios.put("Api link" , + id, formData, {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
        })
        .then(response => {
             console.log(response.data);
        })
        .catch(function (error) {
              console.log(error); 
        });
Enter fullscreen mode Exit fullscreen mode

DELETE

(You need the id for delete a data)

axios.delete("Api Link" + id, {
           headers: {
           'Authorization': 'Bearer '+ 'Your Bearer Pssword',
           "Content-Type": "application/json",
           }
           })
           .then(function(response){
           console.log(response.data);
           })
          .catch(function (error) {
           console.log(error); 
          });
       }
Enter fullscreen mode Exit fullscreen mode

Thanks for reading my first #dev post!

💖 💪 🙅 🚩
ljnce
Luca

Posted on July 21, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Use Axios API with Vue CLI
vue Use Axios API with Vue CLI

July 21, 2020