This plugin compiles Vue single file components (SFC) to plain JavaScript.
npm install gulp-vue-single-file-componentbash
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
{{ greeting }} !
`
/js/components/hello2.vue:
`html
{{ greeting }} {{ name }}!
`
/public/index.html:
`html
Example
{{ message }}
Bob
`
Finally run the following command to launch the application:
`bash
gulp
``