Vue.js - Compile .vue file with gulp

Question

I have a Vue component. This component is very basic and looks like this:

my-component.vue

<template>
  <div class="foo">
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },

    props: {
      message: {
        type: String,
        default: ''
      }
    },

    methods: {
      display: function() {
        alert(this.message);
      }
    },
  };
</script>

I want to import it into an HTML file using something like this:

<script type="text/javascript" src="/components/my-component.min.js"></script>

Then, I would like to be able to just use the component in my HTML file like this:

<my-component message="hello"></my-component>

Is this possible? If so, how? Everything that I see uses web pack and a bunch of other stuff. I have a working component. I just can't figure out how to make it easily deployable.

I created a gulpfile to help with this. This looks like this:

gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var webpack = require('webpack-stream');

gulp.task('default', ['build']);

gulp.task('build', [], function() {
    return gulp.src('./src/my-component')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(concat('my-component.min.js'))           
        .pipe(gulp.dest('./deploy'))
    ;
});

When I run the build gulp task, I receive a message that says: webpack-stream - No files given; aborting compilation

The confusing part is, I have some unit tests that successfully work. I'm running those tests via this command: nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

What am I doing wrong? How do I package up my component so that I can import it into other apps?

Answer 1

If you don't want to use any bundle - a full webpack bundle (please reconsider this decision if you are working on a big project) nor browserify (see vueify)... then you may use this package to compile single file component into single js file, with gulp:

https://www.npmjs.com/package/gulp-vueify2

I must mention that I am the author of this module.