Can't get it to work for some reason

[fmarcoux96]

Hi,

I am setting up a webapp using Vue and Vue-Auth, and it uses VueAxios to make it work.

However, for some reason, I always get:

vue-axios.min.js?a7fe:1 Uncaught TypeError: Cannot set property 'axios' of undefined
    at o (vue-axios.min.js?a7fe:1)
    at Function.Vue.use (vue.common.dev.js?4650:5098)
    at eval (app.js?6d40:38)
    at Module../resources/js/app.js (app.js:2880)
    at __webpack_require__ (app.js:833)
    at fn (app.js:130)
    at Object.0 (app.js:4183)
    at __webpack_require__ (app.js:833)
    at app.js:971
    at app.js:974

Which is super annoying right now. So, what am I doing wrong?

File app.js (the rest is just basic components):

import './bootstrap'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import Vuex from 'vuex'
import VueSweetalert2 from 'vue-sweetalert2'
import VueProgressBar from 'vue-progressbar'
import './registerServiceWorker'
import ArgonDashboard from './plugins/argon-dashboard'

import auth from '@websanova/vue-auth'
import authBearer from '@websanova/vue-auth/drivers/auth/bearer'
import authVueRouter from '@websanova/vue-auth/drivers/router/vue-router.2.x'
import authAxios from '@websanova/vue-auth/drivers/http/axios.1.x'

Vue.config.productionTip = false
Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Axios.defaults.withCredentials = true;

Vue.use(ArgonDashboard)
Vue.use(VueSweetalert2)
Vue.use(VueProgressBar)
Vue.use(Vuex)
Vue.use(VueAxios, Axios)
Vue.use(auth, {
    auth: authBearer,
    http: authAxios,
    router: authVueRouter,
    rolesKey: 'role',
    loginData: {
        method: 'POST',
        redirect: { name: 'dashboard' },
        staySignedIn: true,
        fetchUser: true,
        url: '/api/login'
    },
    logoutData: {
        makeRequest: true,
        redirect: { name: 'login' },
        method: 'POST',
        url: '/api/logout'
    },
    fetchData: {
        enabled: true,
        url: '/api/current-user',
        method: 'GET'
    },
    refreshData: {
        enabled: false
    }
})

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

/*axios.interceptors.request.use(config => {
    app.$Progress.start(); // for every request start the progress
    return config;
});

axios.interceptors.response.use(response => {
    app.$Progress.finish(); // finish when a response is received
    return response;
});
*/

If anyone has an idea, I'm open!

[yiv-dev]

Hi! Same error in my app after vue-axios update... I rolled back to 2.1.4

[fmarcoux96]

Hi! Same error in my app after vue-axios update... I rolled back to 2.1.4

Okay, this seems to have fixed it for now. Still got the vue-auth/router issue.

Think you can help with that? https://github.com/websanova/vue-auth/issues/598

[imcvampire]

What VueJS version do you use? vue-axios 3.x only supports VueJS 3.

Please check the support matrix on README

[sc0Vu]

@imcvampire vue 3 had multiple breaking changes, but I think it would be great if vue-axios can backward support. Anyway I had made some change to do this, please have a look of my PR.

[imcvampire]

Closed by https://github.com/imcvampire/vue-axios/pull/56

Thank @sc0Vu for your contribution