Vue-js Get 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 get 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

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 get request via Axios

Now we will send our form data via Axios get 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 get</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.get('/formSubmit')
                    .then(function (response) {
                         this.name = response.data.name;
                         this.description = response.data.description
                        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.