Vuetable-2: Latest update messing up vue-resource interceptors

[divyanthj]

Just an FYI, the latest ^v1.6.0 doesn't seem to pick up vue-resource interceptors. I had to roll back the vuetable-2 version to v1.3.1 to get it working.

Specifically, I use a vue-resource interceptor to attach an "Authorization" token to HTTP requests. However, it doesn't get added to calls made by vuetable2.

[ratiw]

@divyanthj The latest version is replacing vue-resource with axios, so you'll have to use the interceptors in axios instead. Please see the release note

[anselmobattisti]

To solve this problem you need to add in axion interceptos your Authentication

import axios from 'axios'
Vue.use(axios)
axios.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer ' + window.localStorage.getItem('token')
return config;
})

im using it in my main.js file

[ChrisIgel]

I have it configured that way and normal axios requests are working but vuetable2 seems to ignore the global axios settings (axios.defaults and axios.interceptors).
Probably because axios is imported (Vuetable.vue#111), instead of relying on global availability.

[chrislandeza]

Having the same problem as @ChrisIgel

I already setup the Authorization header on axios.config. The authorization header is not being attached if vuetable is the one performing the ajax request.

Has anyone managed to solve this issue?

[ratiw]

Can you setup some code in jsfiddle or codepen to demonstrate this problem? And let me know what would you expect from the request and response. I'll see what might be the problem.

[chrislandeza]

@ratiw - I think the version mismatch is causing the issue. I tried matching the axios version defined on vuetable-2's package.json which is "^0.15.3" and it fixed my problem.

I previously had version "^0.16.0".

[ozguruysal]

In case it may help figure out the issue, if I import like:

import Vuetable from 'vuetable-2';

then Vuetable ignores any global axios settings or intercepters.

Importing it like:

import Vuetable from 'vuetable-2/src/components/Vuetable';

fixes the issue for me. I'm not sure why we can't import it like in the first example.

[vincentfuzifeng]

Hi @ratiw may I know how can I rollback v1.3.1 with dist folder?So that I can directly grab the minified JS file and use it as plugin in my index.html?

[vincentfuzifeng]

@ratiw , can you edit your own fiddle http://jsfiddle.net/CristiJ/z11fe07p/1318/ that have the axios example?

[cristijora]

@vincentfuzifeng Unfortunately there was no js bundle until version 1.6.0

[stefanullinger]

Hi, I currently run into the very same issue – in my project I use a newer version of axios than the one that is used by vuetable-2, so when node imports axios for vuetable-2, it will look into vuetable-2's node_modules directory instead of picking the one in the project's node_modules directory.

I guess the best solution would be that vuetable-2 defines axios as a peer dependency. A very good description can be found here: https://stackoverflow.com/questions/26737819/why-use-peer-dependencies-in-npm-for-plugins

[ratiw]

I actually haven't thought through this issue when switching to axios. And there might be more than one solution. The problem is I am not really sure if the solution I would pick would solve all the problem or not.

"Peer dependency" suggested by @stefanullinger is nice but I think it only suggests the user that the version of the axios they're using (probably newer) and the one used by Vuetable as mismatch.
If they are happy to downgraded to the same version of Vuetable, that would be fine.

But if they intend to use the newer version because there is/are some features from that version that they need, that will still present a problem.

I'm now leaning toward injecting axios to be used inside Vuetable with a fallback. What do you guys think about this solution?

[stefanullinger]

I think the short term solution would be to define axios as a peer dependency. I guess axios' API – or at least the parts used by vuetables-2 – are very stable.

The mid or long term solution could be to add an abstraction layer, so you could kind of inject whatever HTTP library you like. This way vuetables-2 would not force you to use axios.

[lgullestrup]

Forgive my lack of knowledge on Terminology, i am guessing having Axios as peer dependent would mean that Vuetables would depend on Axios being loaded instead of loading axios itself.

This would certainly allow an application to use a global configuration for axios calls. Custom or specific config requirements would require httpOptions to be set. (you could do this for each table at this stage, how ever i can see how this would be tedious)

If this approach is taken, then it would make sense to add another property (defaulted to false) to tell vuetables to use the default configuration for axios.

This would allow your to Globally configure Axios, and tell Vuetable to use that global configuration.
any httpOptions set would only overide the options passed into it.

Hope this is making sense?

[T-Bod]

Just updated to Axios 16.2 and am running into the same issue, is there a more robust solution than just using 15.3?

[dehypnosis]

@ozguruysal

thanks god, you saved my time!

import Vuetable from 'vuetable-2'
Vue.install(Vuetable)

when use main export for vuetable-2 (vuetable-2/dist/vuetable-2.js)
plugin was even not installed.

import { install } from 'vuetable-2'
install(Vue);

so when changed the way to install like above, it installed well.
but then axios global configuration wasn't applied.
it seems that dist vuetable-2 not using the axios module which is already being used in app.

import Vuetable from 'vuetable-2/src/components/Vuetable.vue'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination.vue'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue'

Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination', VuetablePagination);
Vue.component('vuetable-pagination-info', VuetablePaginationInfo);

when installed like above, works well for the present.

packages version info: {
"vuetable-2": "^1.6.5",
"axios": "^0.16.2",
}