Monday, April 3, 2017

Require a Vue filter with Laravel webpack

I'm using Vue 2 with Laravel 5.4 and webpack. I load my components globally by requiring the .vue file associated:

Vue.component('tabs', require('./components/global/Tabs.vue'));

On the .vue file I have a script tag with export default {...} and everything works fine. Now I want to load a filter with the same require, but I'm not be able to do in any form. The filter is:

Vue.filter('formatbytes', function (bytes, decimals) {

if (bytes == 0) return '0 Bytes';
var k = 1000,
    dm = decimals + 1 || 3,
    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];

});

The above works fine but, how can I put the filter logic on a separate .vue file? I have tested with the following with no luck:

export default {
filters: {
    formatbytes: function (bytes, decimals) {
        ...
    }
  }
}

Another:

export default {
formatbytes: function (bytes, decimals) {
    ...
  }
}



via Iker Vázquez

Advertisement