Vue Auth / Recipes / Common Axios Issues

Axios is one of the main libraries used with Vue and it comes with support out of the box for Vue Auth. Here we'll highlight some common issues that come up with using the library with Vue Auth.

#this.Vue.axios is undefined

Since vue-auth is dependent on a quite a few drivers and other plugins it will often get undefined errors for it's dependencies.

If you see this issue it's likely that Axios has not been properly registered before the Vue Auth plugin.

Since Axios is a standalone library it may require using the additional vue-axios wrapper.

A typical setup should look like something below.

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

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

Note that it should also be possible to set it directly. However, if this is done in a separate file, the Vue.axios assignment may not work.

import Vue from 'vue';
import axios from 'axios';

Vue.axios = axios;

Vue.use(vueAuth, ...);

#Body param is not working

This is very common issue as many of the examples show the plugin using body for vue-resource which does not work for Axios which uses data.

This issue has already been highlighted body param is not working recipe.