Vue Form Post

Posted on  by admin

Learn how to make POST requests in Vue.js. In front-end development, you’ll often make POST requests when submitting a form.

Posting Form Data

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 👋.

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.

Cheers,Renat Galyamov. Want to share this with your friends?👉renatello.com/vue-js-post-request. PS: Make sure you check other Vue.js tutorials.

  • In this post, we will cover how we can submit form data to an API using Axios in VueJS.
  • If you don’t have Axios installed in your project you can get it installed using yarn or npm.
  • Once the Axios in installed you can use it in your Components. I am working on a Single File Vue Component.

My Component’s template consists of a basic form with different possible form fields. Here is HTML output. To post the form to an API, we bind each input to the specific data property to VueJS and also create a method which gets invoked when the form is submitted.

POST request using axios with async/await

We have used the post method on Axios library, as the first parameter we define the API where the data needs to be sent, in this case it is /contact, and as the second parameter we define what data needs to be sent, since we have all the data in the form object.

Simple POST request with a JSON body using axios

Axios works on the promise based principle of javascript. Hence we define the promise of what needs to be done once you get a successful response from the server.

code

You can utilize the then, catch and finally method as per the actions that need to be performed after submitting the form.

Once you submit the form you can see the data traveling to the API in the network tab of developer tools.

Installation

That’s all about submitting the form in VueJS using Axios. Below is a quick set of examples to show how to send HTTP POST requests from Vue to a backend API using the axios HTTP client which is available on npm.

POST request using fetch with error handling

Other HTTP examples available:.

Vue + Axios: GET. Vue + Fetch: GET, POST. React + Fetch: GET, POST, PUT, DELETE. React + Axios: GET, POST, PUT, DELETE. Angular: GET, POST, PUT, DELETE. Blazor WebAssembly:GET, POST. Axios: GET, POST, PUT, DELETE. Fetch: GET, POST, PUT, DELETE. With the npm CLI: npm install axios. With the yarn CLI: yarn add axios. This sends an HTTP POST request to the Reqres api which is a fake online REST api that includes a generic /api/ route that responds to POST requests for any with the contents of the post body and a dynamic id property.

This example sends an article object to the /api/articles route and then assigns the id from the response to the vue component data property articleId so it can be displayed in the component template.

Example Vue component at https://codesandbox.io/s/vue-axios-http-post-request-examples-ecqqn?file=/app/PostRequest.vue.

This sends the same POST request from Vue using axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

Installing axios from npm

Example Vue component at https://codesandbox.io/s/vue-axios-http-post-request-examples-ecqqn?file=/app/PostRequestAsyncAwait.vue.

This sends a POST request from Vue using axios to an invalid url on the api then assigns the error message to the errorMessage component state property and logs the error to the console. Example Vue component at https://codesandbox.io/s/vue-axios-http-post-request-examples-ecqqn?file=/app/PostRequestErrorHandling.vue.

Simple POST request with a JSON body using fetch

This sends the same POST request again from Vue using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header. Example Vue component at https://codesandbox.io/s/vue-axios-http-post-request-examples-ecqqn?file=/app/PostRequestSetHeaders.vue.

POST request using axios with error handling

POST request using axios with set HTTP headers

POST request using fetch with set HTTP headers

.lazy

Below is a quick set of examples to show how to send HTTP POST requests from Vue to a backend API using fetch() which comes bundled with all modern browsers. Other HTTP examples available:. Vue + Fetch: GET. Vue + Axios: GET, POST.

.number

React + Fetch: GET, POST, PUT, DELETE. React + Axios: GET, POST, PUT, DELETE. Angular: GET, POST, PUT, DELETE. Blazor WebAssembly:GET, POST.

Axios: GET, POST, PUT, DELETE. Fetch: GET, POST, PUT, DELETE. This sends an HTTP POST request to the JSONPlaceholder api which is a fake online REST api that includes a /posts route that responds to POST requests with the contents of the post body and an id property.

.trim

The id from the response is assigned to the vue component data property postId so it can be displayed in the component template. Example Vue component at https://codesandbox.io/s/vue-fetch-http-post-request-examples-4i038?file=/app/PostRequest.vue.

POST request using fetch with async/await

This sends the same POST request from Vue using fetch, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

Example Vue component at https://codesandbox.io/s/vue-fetch-http-post-request-examples-4i038?file=/app/PostRequestAsyncAwait.vue. This sends a POST request from Vue to an invalid url on the api then assigns the error to the errorMessage component state property and logs the error to the console.

The fetch() function will automatically throw an error for network errors but not for HTTP errors such as 4xx or 5xx responses.

For HTTP errors we can check the response.ok property to see if the request failed and reject the promise ourselves by calling return Promise.reject(error);.
This approach means that both types of failed requests - network errors and http errors - can be handled by a single catch() block.