fixed.

The solution is to:

pass through .transform(babelify) as well
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.

I think my problem is that I have es6 in my vues. I am getting:

[09:33:36] Starting 'public'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "s
tart"

That error doesn't really tell me where it is coming from (my understanding is that it is from browserify), but if I null-op the public script the rest of the build works. Here's that script:

gulp.task('public', ['public/styles'], () => {
    mkdirp.sync(dest+'/public/scripts')
    return browserify('public/scripts/demo.js')
        .transform(vueify)
    .bundle()
    .pipe(fs.createWriteStream(dest+'/public/scripts/index.js'))
})

That's basically copied from the readme.MD for vueify. Its dependency public/styles definitely does work.

So, I thought, let's try to compile them manually. I ensured I have babel-core and babel-preset-latest. Then: built the files:

.babelrc

{ "presets": ["latest"]}

vue.config.js

var babel = require("babel-core");

module.exports = {
    customCompilers: {
    // for tags with lang="es6"
    es6: function (content, cb, compiler, filePath) {
      // content:  content extracted from lang="es6" blocks
      // cb:       the callback to call when you're done compiling
      // compiler: the vueify compiler instance
      // filePath: the path for the file being compiled
      //
      // compile some ES6... and when you're done:
      const babelified = babel.transform(content) // what to do with this funky babelified.map ?
      cb(null, babelified.code)
    }
}

That's basically straight out of the readme.MD, but for es6.

Then I changed my vues to have that tag, like:

<template>
    <div class="container">
        <app-header></app-header>
        <div class="row"><div class="col-xs-12">
            <transition name="slide" mode="out-in">
                <router-view></router-view>
            </transition>
        </div></div>
    </div>
</template>

<script lang="es6">
    import Header from './Header.vue'

    export default {
        components: {
            appHeader: Header
        },
        created() {
            this.$store.dispatch('initClasses')
        }
    }
</script>

<style>
    body {
        padding: 5vmin;
    }

    .slide-enter-active { animation: slide-in 200ms ease-out forwards }
    .slide-leave-active { animation: slide-out 200ms ease-out forwards }
    @keyframes slide-in {
        from { transform: translateY(-30vmin); opacity: 0 }
        to { transform: translateY(0px); opacity: 1}
    }
    @keyframes slide-out {
        from { transform: translateY(0px); opacity: 1 }
        to { transform: translateY(-30vmin); opacity: 0}
    }
</style>

Problem is, I still get the same error. What am I doing wrong?

ADDENDUMS IN RESPONSE

If I follow the advice below I get an error with import statements in my vue, in processing my main js file demo.js.

package.json's dev deps

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.2",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^14.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "gulp-clean-dest": "^0.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rimraf": "^0.2.1",
    "gulp-sass": "^3.1.0",
    "gulp-util": "^3.0.8",
    "gulp-vueify": "0.0.3",
    "mkdirp": "^0.5.1",
    "vueify": "^9.4.0"
  },

nearly fixed.

With help, I've gotten babelify not choking on vues. This was actually pretty obscure but simple, just get rid of the lang attribute and add type="text/javascript" to each script tag. (Couldn't just add that type specification, it has to be the first tag in the script element).

It almost works. Now I get:

[14:04:32] Starting 'public'...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module './vues/Home.vue' from 'C:\Users\roberto\github\cmst385-accessibility\public\scripts'

That is not the main js file! It's in routes.js

in main I have:

import App from './vues/App.vue'
import {routes} from './routes'

both of these work.

in routes I have:

import Home from './vues/Home.vue';

this does not work even though the file is there.

BINGO

okay so I had actually named the file "Home..vue" :)

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