Vue-js Post request example

We will Learn the below things in this Blog Article.

1. How we install axios via npm ?
2. How to install node modules ?
3. What is axios ?
4. How to import Axios ?
5. Sending post request via Axios
6. Compiling assest.

we will learn about how we can send post requests by using Axios, if Axios is not present in your comoper.json file then you can use the below command to install the Axios

npm install axios

Before installing the Axios, be sure that you have node modules installed, if not please refer to the below command

npm i

Before moving forward, I would like to say something about Axios, if you already know about the Axios then it’s really good, but if you don’t know what Axios is, then let me tell you what is Axios.

Axios is one of the most popular libraries to make API calls and offers abstractions to reduce the code required to make API calls. For example, with Axios, you don’t need to parse the JSON response, and you don’t have to pass the base URL of the requests every time.

Now we will see how we can use Axios post request, First, we have to import our axios from the library.

import axios from "axios";

Now we will send our form data via Axios post request example, below is my example ExampleComponent.vue Code

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">CodeHunger Laravel Vue Axios Post </div>

                    <div class="card-body">
                        <form @submit="formSubmit">
                            <strong>Name:</strong>
                            <input type="text" class="form-control" v-model="name">
                            <strong>Description:</strong>
                            <textarea class="form-control" v-model="description"></textarea>

                            <button class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from '@axios'
    export default {
        data() {
            return {
                name: '',
                description: '',
            };
        },
        methods: {
            formSubmit(e) {
                e.preventDefault();
                axios.post('/formSubmit', {
                        name: this.name,
                        description: this.description
                    })
                    .then(function (response) {
                        console.log(respons.data)
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
        }
    }
</script>

After adding the above you need to run the below code

npm run watch

for the development mode, you can use the below code

npm run dev

I hope now you understood the basic concept of Axios post, if it’s working please rate me 5.