Uncaught TypeError: Cannot set property 'axios' of undefined

Question

I just tried to write a SPA with the help of axios and latest Vue in Laravel. I installed everything needed through npm, nevertheless I get the error mentioned in my title.

app.js:19782 Uncaught TypeError: Cannot set property 'axios' of undefined

I looked into my components, app.js & bootstrap.js, but everything looks normal to me. I even searched for solutions online, sadly they did not help out.

My dev server runs in the background, so there should be a working connection (artisan serve).

app.js

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

bootstrap.js

window._ = require('lodash');



window.axios = require('axios');


window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

AllBooks.vue

<template>
    <div>
        <h3 class="text-center">All Books</h3>
        <br />

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Author</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="book in books" :key="book.id">
                    <td>{{ book.id }}</td>
                    <td>{{ book.name }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.created_at }}</td>
                    <td>{{ book.updated_at }}</td>
                    <td>
                        <div class="btn-group" role="group">
                            <router-link
                                :to="{ name: 'edit', params: { id: book.id } }"
                                class="btn btn-primary"
                                >Edit
                            </router-link>
                            <button
                                class="btn btn-danger"
                                @click="deleteBook(book.id)"
                            >
                                Delete
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            books: []
        };
    },
    created() {
        this.axios.get("http://localhost:8000/api/books").then(response => {
            this.books = response.data;
        });
    },
    methods: {
        deleteBook(id) {
            this.axios
                .delete(`http://localhost:8000/api/book/delete/${id}`)
                .then(response => {
                    let i = this.books.map(item => item.id).indexOf(id); // find index of your object
                    this.books.splice(i, 1);
                });
        }
    }
};
</script>

I'm seeing the same issue after updating vue-axios from 2.1.5 to 3.0.1 — Th3S4mur41

tonoslfx tonoslfx · Accepted Answer · 2020-10-12T14:05:36

Try adding the axios to the Vue instance.

Read this for more details https://vuejs.org/v2/cookbook/adding-instance-properties.html

In your app.js

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

Vue.prototype.$axios = axios; // notice this

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

then in your AllBooks.vue

<script>
export default {
    data() {
        return {
            books: []
        };
    },
    created() {
        this.$axios...;
    },
    methods: {
        deleteBook(id) {
            this.$axios...;
        }
    }
};
</script>

Uncaught TypeError: Cannot set property 'axios' of undefined

1 Answers