vueify (in gulp task) with babel transform of vue files

These things are always difficult to debug without seeing the project, but I can show you how I set mine up, and you can check whether you have all these things in place:

Firstly, make sure you can use ES6 in your gulpfile. The easiest way is to name it gulpfile.babel.js. I'm guessing you already have this setup as you are managing to compile your styles.

Now, make sure that you have installed babel-latest, once again I'm sure you have done this:

npm install --save-dev babel-preset-latest

I actually use the babel-es2015-preset, so if you find latest is your problem simply install that instead and add the following to your .babelrc:

{ "presets": ["es2015"]}

Now, make sure you have installed babelify:

npm install --save-dev babelify

Then add the following to package.json:

  "browserify": {    "transform": [      "babelify",      "vueify"    ]  }

This means you can get rid of vue.config.js because browserify should now apply the transforms automatically.

Finally in your gulpfile you can do:

gulp.task('public', ['public/styles'], () => {   return browserify({            entries: 'public/scripts/demo.js',            debug: true        })        .bundle()        .pipe(source('demo.js')))        .pipe(gulp.dest('public/scripts'));});

I've never needed to add the lang attribute to the script tag to get this working.

The solution is to:

1. pass through .transform(babelify) as well (or do as listed in description and set it to go through babelify in package.json)
2. ensure all your .vue-file script elements look like <script type="text/javascript"> -- that type attribute must come before custom attributes, lang attribute.. might ahve to be the first, even only attribute on the tag.