Register custom filters with vue.js

Question

I am using Vue.js with Laravel with Elixir and Browserify. I want to register some custom global filters, each in their own file. I tried to follow the docs, but I can't get it to work. This is the error I get:

Uncaught ReferenceError: Vue is not defined

Any ideas?

Here's my code:

vue/filters/reverse.js

Vue.filter('reverse', function (value) {
 return value.split('').reverse().join('')
})

vue/app.js

var Vue = require('vue');
Vue.use(require('vue-resource'));

new Vue({
    el: 'app',
    data: {
        test: 'abcde'
    },
filters: {
    reverse: require './filters/reverse.js'
}

});

View

<h1 v-text="test | reverse"></h1>

If I add this in reverse.js, it still doesn't work

var Vue = require('vue');

And my gulpfile

    mix.browserify('app.js');

Answer 1

Try like this in vue/filters/reverse.js

module.exports =(function (value) {
  return value.split('').reverse().join('')
})

And then in your app.js

Vue.filter('reverse', require('./filters/reverse'))