How to use vuetable-2 in laravel 5.4?

[insanrizky]

I'm new in vue js but i have used laravel as well. But, the problem is, how to use this repo in laravel 5.4? i learn from this doc to use vuejs in Laravel. There are many differents with tutorial in this repo.. please help me.. thank in advanced.

[ratiw]

Will do.

[ratiw]

@insanrizky Please see it here

[insanrizky]

thank you so much (y)

2017-02-14 15:52 GMT+07:00 Rati Wannapanop notifications@github.com:

@insanrizky https://github.com/insanrizky Please see it here https://github.com/ratiw/vuetable-2-with-laravel-5.4

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ratiw/vuetable-2-tutorial/issues/11#issuecomment-279645119, or mute the thread https://github.com/notifications/unsubscribe-auth/AH1sB_2Q6oVYwFgrtkWw9Z_4dK9Xt9MEks5rcWtqgaJpZM4L-ZPw .

[isometriq]

What would be a good way to pass information from laravel to componen MyVueTable (containing the vuetable-2), for instance to use {{ route('users.index') }} as the api-url? ...same for a filter with select options (from laravel controller).

[ratiw]

@isometriq I think there are many techniques to do that, but it will usually come down to preference. I believe you'll have to try and stick with the one feels more comfortable to you.

For me, it depends more on the situation.

Just treat MyVueTable component the same as another component. If it needs those properties to work, you'll have to pass them to it. But when you feel that there are too many properties to pass down, that means it's getting more complex.

If you cannot strip it down or break it into smaller components. Consider using prop validation to allow assigning default to them, or wrapping some or all of them in an Object. You can then construct that object in laravel and pass it down to the component in only one property.

[isometriq]

Thanks @ratiw for your advice. Since I wanted to create listing component with specific fields, filters and data source, I ended up setting the relative resource path inside these wrapping components. Then I pass to api-url the baseUrl + resourcePath.

app.blade.php

<script id="laravel-data" type="application/json">
    {!! json_encode([
        'baseUrl' => url(''),
    ]) !!}
</script>
<script src="{{ mix('js/app.js') }}"></script>

app.js

window.app = new Vue({
    el: '#app',
    data: {
        laravel: JSON.parse(document.getElementById('laravel-data').innerText)
    }
});

[isometriq]

This may be useful to easily compose js vars https://github.com/laracasts/PHP-Vars-To-Js-Transformer

[isometriq]

And for translations... https://github.com/martinlindhe/laravel-vue-i18n-generator