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

Postado em por Wolmir Cezer Garbin em Vue.js | 129 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.

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

Posts relacionados


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