Como consumir APIs REST com Vue.js: guia prático

Se você está desenvolvendo interfaces modernas com JavaScript, saber como consumir APIs REST com Vue.js é essencial. Neste artigo, você vai aprender o passo a passo para integrar sua aplicação Vue a APIs externas ou backends, como um servidor Java com Spring Boot, por exemplo.

---

O que é uma API REST?

Uma API REST (Representational State Transfer) permite que aplicações se comuniquem por meio de requisições HTTP, como GET, POST, PUT e DELETE. Com ela, você pode buscar, enviar, editar ou excluir dados de um servidor.

Integrar APIs REST ao Vue.js torna sua aplicação muito mais dinâmica, funcionando como uma SPA (Single Page Application) completa.

---

Como consumir APIs REST com Vue.js

1. Criando o projeto com Vue CLI

Caso ainda não tenha um projeto Vue configurado, siga este passo:

vue create projeto-api
cd projeto-api
npm run serve

Se tiver dúvidas, veja nosso artigo anterior: Como instalar npm e Vue.js

---

2. Instalando o Axios

Para consumir APIs com Vue.js, a biblioteca mais usada é o Axios.

npm install axios

Agora, importe o Axios no componente onde você deseja fazer a requisição:

import axios from 'axios';

---

3. Exemplo prático de requisição GET

Abaixo, veja como consumir APIs REST com Vue.js usando Axios em um componente:

<template>
  <div>
    <h2>Lista de Produtos</h2>
    <ul>
      <li v-for="produto in produtos" :key="produto.id">
        {{ produto.nome }} - R$ {{ produto.preco }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      produtos: []
    }
  },
  mounted() {
    axios.get('https://api.exemplo.com/produtos')
      .then(response => {
        this.produtos = response.data;
      })
      .catch(error => {
        console.error('Erro ao consumir API:', error);
      });
  }
}
</script>

Esse exemplo faz uma chamada para a API assim que o componente é montado, carregando dados automaticamente.

---

4. Requisição POST (enviando dados)

Veja como consumir APIs REST com Vue.js para enviar dados a um backend:

axios.post('https://api.exemplo.com/produtos', {
  nome: 'Notebook',
  preco: 3500
})
.then(response => {
  console.log('Produto salvo com sucesso:', response.data);
})
.catch(error => {
  console.error('Erro ao enviar dados:', error);
});

---

Dicas extras

• Utilize o async/await para código mais limpo.
• Organize chamadas em serviços (services.js).
• Trate erros com try/catch e exiba mensagens para o usuário.

---

Conclusão

Agora você já sabe como consumir APIs REST com Vue.js, usando Axios para buscar e enviar dados. Essa integração é fundamental para qualquer aplicação moderna e permite que seu front-end se conecte com back-ends robustos como Spring Boot, Node.js, entre outros.

Quer ver como criar uma API com Java? Confira nosso post: Como usar query no Spring Boot