TypeError: this.Vue.axios is undefined when using axios HTTP driver

Question

Using vue-auth (vue-auth on GitHub) with the Axios HTTP driver I get the following error in the browser console:

TypeError: this.Vue.axios is undefined

main.js

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import "./libs/vue-auth";

./libs/vue-auth.js

import Vue from "vue";
import vueAuth from "@websanova/vue-auth";
import bearer from "@websanova/vue-auth/drivers/auth/bearer";
import axiosHttp from "@websanova/vue-auth/drivers/http/axios.1.x";
import vueRouter from "@websanova/vue-auth/drivers/router/vue-router.2.x";

// Vue.axios = axios;

Vue.use(vueAuth, {
  auth: bearer,
  http: axiosHttp,
  router: vueRouter
  // ...
});

When removing the comment for Vue.axios = axios; it seems to work at first glance. So I thought moving Vue.axios = axios; to the main.js but then again it's not working.

score 1 · Accepted Answer · answered May 20 '20 at 08:03

Vue.axios can be assigned either manually or with vue-axios plugin. Since @websanova/vue-auth/drivers/http/axios.1.x expects it to exist on plugin initialization:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
...

Vue.use(VueAxios, axios)
Vue.use(vueAuth, ...)

Moving Vue.use(VueAxios, axios) to main.js won't work because it should be evaluated before ./libs/vue-auth is imported, and it cannot precede import according to JS specs. Vue.use(...) should either moved to main.js together, or they both should be located in ./lib modules.

TypeError: this.Vue.axios is undefined when using axios HTTP driver

1 Answers1