vuetable2 with axios with laravel 5.4

[t0n1zz]

so i am moving my current project which using only laravel 5.4 with bootstrap and jquery datatable into laravel 5.4 with vuejs and vuetable2... so in here i am can be said a totally newbie and finding it is very hard to come by some great tutorial that combine all of these things together.

so to the point, i am just making a simple call to show data from laravel api url that already have authentication by using laravel passport but still i get some issue with authentication.

the issue is i have "api/artikel_all" url that is a get request and just returning all article from mysql database and this url have "auth:api" middleware. so when i tried to do get request using axios i can get those data and i am recognized as authenticated user. but when i use that url in vuetable api-url parameter, it can;t recognize me as authenticated user and throw authentication:false. So how to fix that?

and the next thing issue is, since i am still learning using this whole vuejs vuetable things, so i tried to make "api/artikel_all" to be not protected by "auth:api" middleware (for testing purpose to see where i am going wrong) and ofcourse i won't get error authentication:false and in inspection at network i see all the data requested. But i don;t see it rendered in my page, in vuetable it just say "No Data Available". it's getting very confusing.

to make things more clearer here i the code: so here is my index.vue that use to show article

<template>
<div>
<section class="content-header">
    <h1>
        <i class="fa fa-book"></i> {{title}}
        <small>Mengelola Data {{title}}</small>
    </h1>
    <ol class="breadcrumb">
        <li><a ><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active"><i class="fa fa-book"></i> {{title}}</li>
    </ol>
</section>
<section class="content">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">{{title}}</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <vuetable ref="vuetable"
                api-url="/api/artikel_all"
                :fields="fields"
                pagination-path=""
            ></vuetable>
        </div>
    </div>
</section>
</div>
</template>
<script type="text/javascript">
import vuetable from 'vuetable-2';
export default{
    components:{
        vuetable
    },
    created(){
        this.getUser();
    },
    methods:{
        getUser(){
            axios.get('/api/profile').then(response => {
                this.name = response.data.name;
            })
        }
    },
    data(){
        return{
            title: "Artikel",
            fields: [
                'judul','kategoriartikel.name'
            ]
        }
    }
}
</script>

[boomhq]

@t0n1zz Hi, you have http-options for insert your token or authorization on header and more :
#214

  <vuetable ref="vuetable"
                  api-url="/api/artikel_all"
              :fields="fields"
                  pagination-path=""
                          :http-options="httpOptions"
                            ></vuetable>
//In component
         data(){
    return{
       httpOptions: {headers: {'X-Requested-With': 'XMLHttpRequest'},{Authorization: 'bearer xxx'}},
}

I think your fields definition need more explain:

    return{
        title: "Artikel",
        fields: [{
            name: 'judul',
            title: 'judul'
        }, {
            name: 'kategoriartikel.name',
            title: 'kategoriartikel'
        }]
    }
}

[ratiw]

@boomhq Can you help make a suggestion on the improvement?

[boomhq]

@ratiw

In the next release, you should be able to specify the global axios instance to be used inside Vuetable. Unfortunately, I'm fully occupied with another the work and it's very hard to get my hand on the issues.

No need more it would be the top. Thaks for your job 👍

[ahxar]

Use my version of vuetable-2. I just remove import axios from 'axios' to make it work. But i only test it on Laravel 5.4 / 5.5

npm install https://github.com/ahmadsafar/vuetable-2 --save

[ratiw]

If you are in a hurry, please try a new http-fetch prop in the develop branch. See here for a brief description.

Basically, you just define a function that uses the global axios instance (or other http request library that you use) to make the AJAX call and return the Promise back. You assign that function to http-fetch prop and Vuetable will use your function instead of using the default http request library.

[Sotatek-ToanTran]

How i can get this version of http-fetch ?

[t0n1zz]

@ratiw hmm i don't quite understand how to use http-fetch prop...

@boomhq i'am sorry but where can i get Authorization: 'bearer xxx'?

[emacaste]

@ratiw I can not find http-fetch method in develop branch. The version is like master 1.6.5. "vuetable-2": "git+https://github.com/ratiw/vuetable-2.git#develop",

[emacaste]

@ratiw ok the version is correct and http-fetch works great! Nice feature anyway, it permits to be more consistent with global app api client.

[lrembacz]

How can it be used with default axios and http-fetch option? Can please some paste a code with an example of axios default function from laravel?

// EDITED adding just :

MyFetch : function() {
    return axios.create({method: 'get'});
},

works for me! Thanks :)