Md Obydullah Howdy, I am Md Obydullah. I love to write the article which may help others. It's my passion.

Vue.js CLI API Post Request with Axios

Published on May 14, 2019 2 min read

In this tutorial, we are going to learn how to send a post request to a third-party API using Axios.

Table of Contents

  1. Create a Vue CLI project
  2. Install Necessary Dependencies
  3. Add Bootstrap to Project
  4. Import Axios and Create Post Method
  5. The Final App.vue File
  6. Run and Test

Step 1 : Create a Vue CLI Project

Go to your projects directory and create a project by typing this:

vue create vuejs-cli-api-post-request

Navigate to the folder:

cd vuejs-cli-api-post-request

Step 2 : Install Necessary Dependencies

Let’s install Axios by typing this command:

npm install axios --save

For front-end, we are going to install bootstrap, jQuery, and popper.js. We can install these three by one command:

npm install bootstrap jquery popper.js --save

Step 3 : Add Bootstrap to Project

We have already installed Bootstrap in our project. Open main.js from src folder using an editor and add these two lines:

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

So, the main.js looks like:

main.js
import Vue from 'vue'
import App from './App.vue'

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Step 4 : Import Axios and Create Post Method

Go to src folder and open App.vue file. We are going to import the axios and create a post method. We are going to take dummy data from
https://reqres.in/.

App.vue
<script>
import axios from "axios";

export default {
  name: 'app',
  data () {
    return {
      name: '',
      position: '',
    }
  },
  methods: {
      formSubmit(e) {
          e.preventDefault();
          axios
          .post('https://reqres.in/api/users', {
                name: this.name,
                position: this.position
          })
          .then(response => (console.log(response.data)))
          .catch(error => console.log(error))
          .finally(() => this.loading = false)
      }
  }

}
</script>

Step 5 : The Final App.vue File

We have completed our javascript part. Let’s bind to html. I have created a simple form to send post request. So, the final App.vue looks like:

App.vue
<template>
  <div id="app">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header text-center">Vue.js CLI API Post Request with Axios</div>
                      <div class="card-body">
                        <form @submit="formSubmit">
                          <div class="form-group">
                            <strong class="text-left">Name:</strong>
                            <input type="text" class="form-control" v-model="name">
                          </div>
                          <div class="form-group">
                            <strong>Position:</strong>
                            <textarea class="form-control" v-model="position"></textarea>
                          </div>
                          <button class="btn btn-primary">Add User</button>
                        </form>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'app',
  data () {
    return {
      name: '',
      position: '',
    }
  },
  methods: {
      formSubmit(e) {
          e.preventDefault();
          axios
          .post('https://reqres.in/api/users', {
                name: this.name,
                position: this.position
          })
          .then(response => (console.log(response.data)))
          .catch(error => console.log(error))
          .finally(() => this.loading = false)
      }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Step 6 : Run and Test

Now let’s run the app:

npm run serve

Visit the project URL http://localhost:8080 and see the output:

I’ve printed the response in the console. Let’s see the response:

You're welcome to suggest any article to write!

Md Obydullah Howdy, I am Md Obydullah. I love to write the article which may help others. It's my passion.

4 Replies to “Vue.js CLI API Post Request with Axios”

  1. Very simple and easy to understand. However I’m having problems when I want to save the response on a variable, somehow I end with a:

    TypeError: Cannot set property ‘results’ of undefined at eval

    Through my search somehow it appears that the scope of Axios can’t access my variables even if I use this.
    Would there be a form to circunvent the problem? Thx

  2. how to Run and Test on live server
    I am getting localhost URL on live server after run this command ” npm run serve “

    1. Hello Ankit,

      To deploy on live server:
      1. Run this command: npm run build.
      2. After building, you’ll find newly created dist folder in your project folder.
      3. Go to the dist folder and copy all contents to the root directory of your website.

      That’s it. Thank you. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *