Passing response header in Vuetable api-mode

Question

I am wondering if there is a way to use api-mode and still be able to pass a response header such as an authorisation token.

Vuetable consumes this api-url prop and use it to make a GET request. How do I pass in a response header when this happens?

<vuetable
            ref="vuetable"
            :api-url="apiBase"
            :query-params="makeQueryParams"
            :per-page="perPage"
            pagination-path
            :reactive-api-url="true"
            :fields="fields"
            :row-class="onRowClass"
            @vuetable:pagination-data="onPaginationData"
            @vuetable:cell-rightclicked="rightClicked"
          >

I am hoping to pass in a response header, if it was axios it would be done like this.

const response = await axios.get(this.apiBase, {
      headers: { Authorization: `Bearer ${$cookies.get('token')}`}
    })

The documentation does say that it can be done by setting api-mode to false and use data-mode. That way, I will have full control of the api and data. But that means that I would sacrifice query-params that enables me to make use of the library's pagination and sorting function. Generally I would lose a lot of built in functions of vuetable if I go with data-mode instead of api-mode, so I would much prefer to go with api-mode.

Relevant documentation: https://www.vuetable.com/api/vuetable/properties.html#api-mode

Answer 1

I have found the answer from this thread in github.

<vuetable :http-options="httpOptions" ...

and in JS

export default {
    data() {
        return {
            httpOptions: { headers: { Authorization: 'Bearer ' + TOKEN } },
            ...