vuejs / vueify

Browserify transform for single-file Vue components
MIT License
1.17k stars 152 forks source link

How exactly do I use this with Gulp / Electron? #158

Closed PanicIsReal closed 7 years ago

PanicIsReal commented 7 years ago

I am creating a new Electron app and rather than use Webpack I'm trying to just use Gulp, and I found gulp-vueify which seems to compile my files e.g. I have this

src/views/components/test.vue

<template>
  <p>Hi!</p>
</template>

<script>
  export default {}
</script>

<style scoped>
  body {
    color: #000;
  }
</style>

Output

lib/views/components/test.js

var __vueify_insert__ = require("vueify/lib/insert-css")
var __vueify_style__ = __vueify_insert__.insert("\nbody {\n  color: #000;\n}\n")
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<p>Hi!</p>\n"
if (module.hot) {(function () {  module.hot.accept()
  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install(require("vue"), true)
  if (!hotAPI.compatible) return
  module.hot.dispose(function () {
    __vueify_insert__.cache["\nbody {\n  color: #000;\n}\n"] = false
    document.head.removeChild(__vueify_style__)
  })
  if (!module.hot.data) {
    hotAPI.createRecord("_v-609d71d8", module.exports)
  } else {
    hotAPI.update("_v-609d71d8", module.exports, (typeof module.exports === "function" ? module.exports.options : module.exports).template)
  }
})()}

Then I try to use it like so:

'use strict';

var Vue = require('vue');
var App = require('./components/test');

new Vue({
  el: "#main-component",
  render: function render(h) {
    return h(App);
  }
});

Which gives me this error:

C:\Users\Panic\Flare\node_modules\vue\dist\vue.runtime.common.js:511 [Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in anonymous component - use the "name" option for better debugging messages.)

I'm using my Gulp like this:

gulp.task('transpile-vue', () => {
  gulp.src(vueSrc)
  .pipe(vueify())
  .pipe(gulp.dest('lib/views'));
})

What am I doing wrong? Thanks.