Introdução
O Axios é um cliente HTTP que funciona tanto do lado do Cliente (browser), quanto do lado do Servidor (NodeJS), e com isso, da a possibilidade de se manipular dados vindos de uma API, e fazer as operações de CRUD.
Instalação no projeto
Para realizar a instalação, é possível utilizar tanto o NPM quanto o Yarn
npm install axios ou yarn install axios
Como configurar
Você pode realizar a configuração toda no arquivo main.js, mas eu prefiro deixar essa configuração em um arquivo separado, porque pode ser uma configuração extensa dependendo do projeto, e separar isso deixa o arquivo main mais organizado, até porque serão configurados muitos outros plugins dentro dele.
Para configurar de maneira organizada então, crie uma pasta no projeto a partir da src chamada configs e dentro dessa um arquivo chamado api.js, dentro desse arquivo ficará toda a configuração do axios adicione o código abaixo nesse arquivo.
import axios from 'axios' const api = axios.create({ baseURL: 'http://localhost:3000/', //url base da sua api timeout: 5000 //tempo máximo de espera de resposta }); export default api
Depois disso, vá até o arquivo main.js, importe esse arquivo de configuração e configure o prototype para quando for fazer requisições http, usar essa configuração do axios, o main.js deve ficar dessa maneira:
import Vue from 'vue' import App from './App.vue' import api from './configs/api' Vue.prototype.$http = api Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
Por fim, para testar o que foi feito, você pode dentro de qualquer componente, fazer uma chamada a sua API para ver quais dados retorna, no meu caso eu tenho uma API de lista de tarefas executando na porta 3000, configurei uma request quando criar o componente HelloWorld, dessa maneira:
created(){
//http://localhost:3000/task
this.$http.get('task').then(tasks => {
console.log(tasks)
})
}
E isso me retorna a seguinte resposta:

Conclusão
Pronto, com isso agora, posso realizar chamadas em todo o sistema utilizando o axios e com uma configuração global, é possível configurar de outras formas e utilizar outros padrões, porém esta é uma boa forma de realizar uma configuração global, e reutilizar dentro do sistema sempre que quiser realizar alguma request.