Vueify - Requiring *.vue files returns empty object

Question

I'm building an app with Gulp/Browserify/Vueify to import files and am having an issue with Vueify. Whenever I import a .vue file, I get an empty object {}. Here is my router file:

router.js

var Vue = require('vue')
var VueRouter = require('vue-router')

Vue.use(VueRouter)

var router = new VueRouter()

var Home = require('./Home.vue');

console.log(Home);

router.map({
    '/':{
        component:Home
    },
    '/test':{
        component:Vue.extend({template:'<div>testing</div>'})
    }
})

export default router

I know the router is working because when I visit /test I see testing, but the console logs {} when it runs console.log(Home);

Here is Home.vue in the same folder:

<style lang="sass">

</style>
<template>
    <div>
        hello world! {{ msg }}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                msg:'hello'
            }
        },
        ready(){
            console.log('ready')
        }
    }
</script>

Here is my gulpfile.js;

var gulp = require('gulp');

var browserify = require('browserify');

var babelify = require('babelify');

var source = require('vinyl-source-stream');

var vueify = require('vueify');

var gutil = require('gulp-util');

gulp.task('js', function () {

        return browserify('./src/js/index.js')

            .transform(vueify).on('error',gutil.log)

            .transform([babelify, {
                presets: ["es2015"],
                plugins: ['transform-runtime']
            }]).on('error',gutil.log)

            .bundle()

            .pipe(source('theme.js'))

            .pipe(gulp.dest('js'))

});

I receive no errors during compilation or when I run it, but importing .vue files doesn't give me anything. Thanks for the help.

Here is package.json if it helps:

"dependencies":{
  "vue": "^1.0.21",
  "babel-runtime": "^5.8.0"
},
"devDependencies": {
  "babel-core": "^6.7.6",
  "babel-plugin-transform-runtime": "^6.7.5",
  "babel-preset-es2015": "^6.6.0",
  "babelify": "^7.2.0",
  "browserify": "^13.0.0",
  "gulp": "^3.9.1",
  "gulp-concat": "^2.6.0",
  "gulp-jshint": "^2.0.0",
  "gulp-livereload": "^3.8.1",
  "gulp-notify": "^2.2.0",
  "gulp-plumber": "^1.1.0",
  "gulp-sass": "^2.2.0",
  "gulp-util": "^3.0.7",
  "jshint": "^2.9.1",
  "node-sass": "^3.4.2",
  "vinyl-source-stream": "^1.1.0",
  "vue-hot-reload-api": "^1.3.2",
  "vue-resource": "^0.7.0",
  "vue-router": "^0.7.13",
  "vueify": "^8.3.9",
  "vueify-insert-css": "^1.0.0",
  "vuex": "^0.6.2"
},
"browserify": {
  "transform": [
    "vueify",
    "babelify"
  ]
}

Edit/update: Still have not solved this. I removed gulp and am using browserify/watchify, vueify, and uglifyjs through the command line rather than gulping. However I am still having issues including babelify, so I am resorting to using module.exports and require() instead of import/export. Ideally I would be able to use gulp for all of this so I am leaving the question as is, I will likely offer a bounty as I would like to solve this.

Answer 1

The problem may well be that you specify browserify transforms both in package.json and in your gulp file. In my setup this leads to browserify executing babelify -> vueify -> babelify -> vueify

The results of this are somewhat confusing and almost certainly not what you want.