gulp-vue-single-file-component

This plugin compiles Vue single file components (SFC) to plain JavaScript.

Installing

``bash
npm install --save-dev gulp-vue-single-file-component
`

Usage

`javascript
var vueComponent = require('gulp-vue-single-file-component');

gulp.task('vue', function() {
return gulp.src('./js/components/*.vue')
.pipe(vueComponent({ / options / }))
.pipe(gulp.dest('./dist/'));
});
`

Example

First create an empty directory and execute the following command from within that directory:

`bash
npm init
`

Step through the instructions and then execute:

`bash
npm install --save-dev @babel/core @babel/plugin-transform-modules-amd browser-sync gulp gulp-babel gulp-rename gulp-vue-single-file-component
`

Now create the following files within the directory:

gulpfile.js:

`javascript
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var vueComponent = require('gulp-vue-single-file-component');

gulp.task('scripts', () => gulp.src('./js/*.js')
.pipe(babel({ plugins: ['@babel/plugin-transform-modules-amd'] }))
.pipe(gulp.dest('./public/js'))
.pipe(browserSync.stream())
);

gulp.task('vue', () => gulp.src('./js/components/*.vue')
.pipe(vueComponent({ debug: true, loadCssMethod: 'loadCss' }))
.pipe(babel({ plugins: ['@babel/plugin-transform-modules-amd'] }))
.pipe(rename({ extname: '.js' }))
.pipe(gulp.dest('./public/js/components'))
.pipe(browserSync.stream())
);

gulp.task('watch', () => {
browserSync.init({
server: {
baseDir: './public'
}
});

gulp.watch('./js/*.js', gulp.parallel('scripts'));
gulp.watch('./js/components/*.vue', gulp.parallel('vue'));
});

gulp.task('default', gulp.parallel('scripts', 'vue', 'watch'));
`

/js/app.js:

`javascript
import { createApp } from 'vue';
import Hello from './components/Hello';
import Hello2 from './components/Hello2';

const app = createApp({
data() {
return {
message: 'Hello Vue!'
};
},
components: {
Hello2
}
});

app.component('hello', Hello);

app.mount('#app');
`

/js/components/hello.vue:

`html





`

/js/components/hello2.vue:

`html





`

/public/index.html:

`html

{{ message }}
Bob

`

Finally run the following command to launch the application:

`bash
gulp
``