Vue Request Post

Posted on  by admin

In this tutorial, we are going to learn about how to make get requests and post requests in vuejs using vue resource package. Let’s create a new Vue project by using the vue cli.

Now change your current working directory by running the below command in your terminal.

  • Now we are going to install the vue-resource package by running the following command.
  • Once you successfully installed the vue-resource package, now we need to configure this package by adding below-highlighted lines to the main.js file.
  • By adding this configuration VueResource provides us a global $http object, which helps us to make http requests anywhere from our Vue app.
  • For learning purposes, we are using json placeholder API for making http requests.
  • GET request method is used to fetch the data from the backend API, let’s see an example.
  • In the above code, we are making a get request inside created() lifecycle hook once the data comes back from the API we are updating the post property with the response.
  • The POST request method is used to send the data to the backend API, let’s see an example.
  • In the above code, this.$http.post() method takes two arguments, the first argument is the api url and second argument is the data we need to send to the api.

POST request using axios with async/await

In vue resource we can also set global root url instead of adding a full url to every request. Open your main.js file and add the below code. Now we need to just add paths inside our GET or POST request, which are appended to this root url. Modified2 years, 8 months ago. The code below handles GET request and will display the login page:.

I can display data using router with GET method in vuejs. Now, I want accept POST requests/methods from external website.

Vue Fetch POST example

Is it possible? If it is, how should I make it, if not possible, is there another alternative solution for this? 11 gold badge99 silver badges2727 bronze badges. 2727 bronze badges. No, a client app in a browser cannot accept requests from other websites/services, no matter which HTTP method is going to be used.

If you want for some reason your Vue based application to be accessible remotely then you can consider using SSR.

Creating Vue project

55 gold badges2525 silver badges4141 bronze badges. 4141 bronze badges. No, that's not possible. Your routes are not even GET requests. You can intercept any request on your own application, but you can't listen for external requests, that's what HTTP servers are for.

33 gold badges1919 silver badges3737 bronze badges. 3737 bronze badges. Learn how to make POST requests in Vue.js. In front-end development, you’ll often make POST requests when submitting a form. I’ve already described how to make a GET request in Vue.js. We’ll be using axios, a promise based HTTP client for the browser and node.js, to make this API request. You should replace '/user' with your own URL.

Alternatively, you can perform a POST request in axios by passing config to your request. Hi, I'm Renat 👋.

Simple POST request with a JSON body using axios

In the example above, we’re using JavaScript Promises for the eventual completion of the request. To save your development time, you can move your app’s base URL to a separate config file.

And make it change automatically for development and production sites. If you find this post useful, please let me know in the comments below.