Vue-js Put request example

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 put requests by using Axios, if Axios is not present in your comopser.json file then you can use the below command to install the Axios

How to install axios via npm

npm install axios

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

How to install node modules

npm i

What is Axios ?

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.

How to import Axios ?

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";

Sending put request via Axios

PUT calls are created to edit things or resources in the server. So for example, if you want to edit a user in the database, the logical way to do it is using a PUT call.

PUT calls have the same syntax as in POST, except for the name of the method to call (you only have to call axios.put() with the URL and the object to edit as the second parameter).

<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.put('/update/post/1', {
                        name: this.name,
                        description: this.description
                    })
                    .then(function (response) {
                        console.log(respons.data)
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
        }
    }
</script>

Compiling Assest

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 get request, if it’s working please rate me 5.