Vue JS é um framework que se destaca por sua simplicidade e facilidade de aprendizagem. Contudo, também é um framework muito poderoso e robusto. E quando falamos de aplicações Web, uma tendência que cresce cada vez mais é a conexão de nossos frameworks com uma API. Talvez você já tenha se perguntado: “Como realizar essa conexão com o Vue JS?” É sobre isso que iremos falar neste artigo!
Nós iremos nos basear no projeto que desenvolvemos no artigo Vue JS - Introdução e criando primeiro projeto
Além disso, usaremos a API que desenvolvemos no artigo Criando API PHP com Laravel e PostgreSQL.
Isso será interessante pois iremos ver na prática como ocorre a conexão de dois sistemas diferentes, com duas linguagens diferentes, através da API.
Para começar, vamos iniciar o servidor de nossa API em Laravel usando o comando php artisan serve. Esse comando nos retornará a seguinte resposta:
Vamos agora acessar o nosso arquivo HTML que está usando o Vue e realizar as adaptações necessárias.
Listando usuários
A primeira adaptação que precisamos realizar é no layout. A nossa API possui o campo de email em sua estrutura, mas nosso HTML não. Vamos adicionar mais uma tag para exibir também o email de cada usuário cadastrado:
<input type="text" v-bind:value="user.email" v-on:change="setUser($event.target.value, user.id)">
Excelente! Agora podemos iniciar a implementação das chamadas da API em nosso código. Para isso, iremos usar uma biblioteca JavaScript chamada Axios. Essa biblioteca está cada vez mais conhecida, devido à facilidade de sua configuração e implementação. Além disso, ela realiza as requisições baseando-se em promises, o que nos ajuda a ter um código realmente assíncrono.
A implementação do axios em nosso projeto é bem simples, igual à implementação do Vue. Basta adicionar uma tag