Como fazer requisições Rest em aplicação com Vue.js e VueResource

Postado em por Wolmir Cezer Garbin em Vue.js | 462 Visualizações
Última atualização em:

Quando se tem uma aplicação escrita em single page precisamos adicionar um recurso para consumir uma API rest, para isso neste post mostraremos como utilizar o VueResource

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.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores

Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar