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');

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');

• javascript
• browserify
• javascript-framework
• vue.js
• laravel-elixir

Share Improve this question Follow edited Nov 24, 2015 at 16:45 Michalis Antoniou asked Nov 24, 2015 at 5:29 Michalis AntoniouMichalis Antoniou 34511 gold badge44 silver badges1414 bronze badges 5

• Where are you including the scripts in your blade template? Also, can you share the relevant lines of code from your gulpfile? – Douglas.Sesar Commented Nov 24, 2015 at 11:26
• 1 what if you use : require './filters/reverse.js' instead ? – Roadirsh Commented Nov 24, 2015 at 11:28
• Sorry, that was a typo. I actually meant to write './filters/reverse.js' – Michalis Antoniou Commented Nov 24, 2015 at 16:45
• Just updated my question @Douglas.Sesar – Michalis Antoniou Commented Nov 24, 2015 at 16:47
• Try to manually include Vue.js via CDN to narrow down if there is a browserify issue. – Douglas.Sesar Commented Nov 24, 2015 at 16:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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'))