gulp-vue-single-file-component

v1.2.12

Published

7 months ago

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

Downloads

3,809

0High
0Medium
0Low

nfplee

gulp vue single-file-component amd module

gulp-vue-single-file-component

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

Installing

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

Usage

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:

npm init

Step through the instructions and then execute:

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:

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:

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:

<template>
    <div class="hello">{{ greeting }} <span><slot></slot></span>!</div>
</template>

<script>
    export default {
        data() {
            return {
                greeting: 'Hello'
            }
        }
    };
</script>

<style lang="less">
    .hello {
        color: red;
        
        span {
            color: blue;
        }
    }
</style>

/js/components/hello2.vue:

<template>
    <div class="hello2">{{ greeting }} <span>{{ name }}</span>!</div>
</template>

<script>
    export default {
        props: ['name'],
        data() {
            return {
                greeting: 'Hello2'
            }
        }
    };
</script>

<style>
    .hello2 {
        color: red;
    }
        
    .hello2 span {
        color: green;
    }
</style>

/public/index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script>
        var require = {
            baseUrl: '/',
            paths: {
                'vue': '//unpkg.com/[email protected]/dist/vue.global'
            },
            shim: {
                'vue': {
                    'exports': 'Vue'
                }
            }
        };
        
        loadCss = function(config) {
            var head = document.getElementsByTagName('head')[0];
         
            if (config.content) {
                var style  = document.createElement('style');
                style.type = 'text/css';
                
                if (style.styleSheet)
                    style.styleSheet.cssText = config.content;
                else
                    style.innerHTML = config.content;
         
                head.appendChild(style);
            } else if (config.url) {
                var link  = document.createElement('link');
                link.href = config.url;
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                head.appendChild(link);
            }
        };
    </script>
    <script data-main="js/app" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
        <hello>Bob</hello>
        <hello2 name="Jim"></hello2>
    </div>
</body>
</html>

Finally run the following command to launch the application:

gulp

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

gulp-vue-single-file-component

Installing

Usage

Example