TypeError: this.axios is undefined

Question

I'm having this error in browser console, no matter what I did.

First of all I'm new in VueJS. My site is fully functioning, it's build with Laravel. I am trying to convert the frontend to VueJS. I'm trying retrieve data from database and show them in front page using VueJS.

app.js

require('./bootstrap');

window.Vue = require('vue');

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('title-bar',require('./components/front/titleBar.vue').default);
Vue.component('info-bar',require('./components/front/infoBar.vue').default);

import axios from 'axios';

Vue.use(axios);

const app = new Vue({
    el: '#app',
});

infoBar.js

<template>
<div class="container">
    <div class="row align-items-center justify-content-between mx-0">
        <ul class="list-inline d-none d-lg-block mb-0">
            <li class="list-inline-item mr-3">
                <div class="d-flex align-items-center">
                    <i class="ti-email mr-2"></i>
                    <a href="mailto:support@educati.com">{{ info.email }}</a>
                </div>
            </li>
            <li class="list-inline-item mr-3">
                <div class="d-flex align-items-center">
                    <i class="ti-headphone mr-2"></i>
                    <a href="tel:+8801740411513">{{  info.phone }}</a>
                </div>
            </li>
        </ul>
        <ul class="list-inline mb-0">
            <li class="list-inline-item mr-0 p-3 border-right border-left border-white-0_1">
                <span>EIIN: {{ info.eiin }}</span>
            </li>
            <li class="list-inline-item mr-0 p-3 border-right border-white-0_1">
                <span>Institute Code: {{ info.code }}</span>
            </li>
        </ul>
        <ul class="list-inline mb-0">
            <li class="list-inline-item mr-0 p-md-3 p-2 border-right border-left border-white-0_1">
                <a href="#">Login</a>
            </li>
        </ul>
    </div> <!-- END END row-->
</div> <!-- END container-->

</template>

<script>

export default {
    data() {
        return {
            info: {}
        }
    },
    created() {
        this.axios
            .get('http://localhost/wpschool/public/api/info-bar')
            .then(response => {
                this.info = response.data;
                console.log(response.data)
            });
    }
}
</script>

api.php

<?php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('info-bar','FrontController@infoBar');
Route::get('title-bar','FrontController@titleBar');

controller

public function infoBar()
{
    $info = [
        'email' => siteConfig('email'),
        'phone' => siteConfig('phone'),
        'eiin' => siteConfig('eiin'),
        'code' => siteConfig('institute_code')
    ];

    return response($info);
}

In Vue console the <info-bar> component is returning with empty object. The console is returning with two errors about axios

[Vue warn]: Error in created hook: "TypeError: this.axios is undefined"

found in

---> at resources/js/components/front/infoBar.vue

and

TypeError: this.axios is undefined

Choo 29

I tried reinstalling axios but same result.

Answer 1

Inside app.js add this line of code:

Vue.prototype.axios = axios;

After this statement, you can use this.axios inside every Vue component

Answer 2

On app.js, use

window.axios = require("axios");
// instead of
import axios from 'axios';
Vue.use(axios);

on Vue files, use like this:

axios.get(...)