A comunicação rest possíbilita comunicar diferentes linguagens utilizando um padrão leve e rápido, neste post você aprenderá a criar uma comunicação entre API Rest e sua aplicação single page.

Instalando e habilitando o VueResource

O VueResource não vem habilitado por padrão em nosso projeto, para fazer isso precisamos baixá-lo através do npm. Acesse o terminal e navegue até a pasta principal do seu projeto, precisa parar a aplicação caso esteja rodando e executar dentro da pasta o comando:

npm install vue-resource@1.0.3 --save

Por mais que o npm baixe o módulo, ele ainda não está disponível para ser utilizado pela nossa aplicação. Agora, precisamos registrá-lo no global view object do Vue. Como sua ativação é feita no objeto de view global.

Importando o módulo VueResource

Para isso, vamos alterar o arquivo do projeto que fica em /src/main.js, que é o primeiro arquivo carregado pela aplicação:

import Vue from 'vue'
import App from './App.vue'

// importando o módulo
import VueResource from 'vue-resource';

new Vue({
  el: '#app',
  render: h => h(App)
})

Veja que foi importado o módulo VueResource / vue-resource e adicionado um ponto e vírgula no final da instrução, o que é uma boa prática em JavaScript.

Registrando o VueResource

Não basta importarmos o módulo VueResource, veja, apenas foi importado o módulo dentro de App.vue, agora precisamos registrá-lo. Fazemos isso através do global view object que já temos importado:

import Vue from 'vue'
import App from './App.vue'

// importando o módulo
import VueResource from 'vue-resource';

// registrando o módulo/plugin no global view object
Vue.use(VueResource);

new Vue({
  el: '#app',
  render: h => h(App)
})

Ótimo, agora que já temos o módulo ativo em nossa aplicação, vamos utilizá-lo em nosso aplicação. Mas isso será mostrado em outro post escrito aqui no receitas de código na categoria de Vue.js.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.