Vue Vue Resource

Posted on  by admin

Vue-resource 提供了七种请求的方式,分别为 GET、HEAD、DELETE、JSONP、POST、PUT、PATCH。. Vue 的 HTTP 请求库 Vue-resource 支持的其中请求方式,除了 JSONP 以外,另外的六种 API 名称就是标准的 HTTP 方法。. 可以通过如下属性,获取 Vue-resource 请求的响应。. 可以通过如下方法,获取 Vue-resource 请求的响应。.

Vue-resource 提供了七种请求的方式,分别为 GET、HEAD、DELETE、JSONP、POST、PUT、PATCH。. If you want to learn vue-router and how it works, then check out my article on how to use a vue router in VueJS. On the other hand, if you want to understand the basics of Vue, then please check out my other tutorial Vuejs Tutorial With Example. The vue-resource is a well-known HTTP request library in VueJS. Of course, you can also use axios, jQuery if you want, but today we will attempt HTTP calls using vue-resource.

  1. For the backend API, we are using Laravel Framework. For this project, we are using Vue along with vue-router and vue-resource. Now, create one project folder called VueResource.
  2. In root, create one file call package.json and copy the following code to it. Go to your terminal and type following command. It will install all of our NPM dependencies in our project. The next step would be to configure the webpack so, in the root folder, create one file called webpack.config.js and put the following code in it.
  3. Webpack is a module bundler along without main javascript file it will compile to ES5 with the help of Babel and run the code in any of the older browsers. So webpack will create the bundle.js file. Create one folder called src in your root directory and in that create another folder called components.

Step 3: Set up a router and create the App.vue file.

Also, create one index.html file in a root folder. Next, create a main.js file inside src directory, and this file would be our final javascript file in the sense of development, and it will be compiled with webpack and generates the bundle.js file.


Now, create one div tag inside the index.html and give id app. In main.js file put the following code in it. We have required all of our dependencies in this file like vue-router and vue-resource.

Making POST request

Also created one router object and instantiated our Vue instance. Our Vue instance is bound to app id which is assigned to div tag in the index.html. Further, step would be to create one App.vue file inside src folder and not in components folder. This file is our container file, and all the components are rendered within this file.

It is the container for our application and when the route changes the underlying components will also change, but here the point is that the page will not be refresh.


  1. is the tag in which the route components will be rendered, and we can perform different actions and operations within that component.
  2. We need to include this component in our main.js file so that routes can be configured properly. At the instance creation, I have passed the App component to the application.