VuePlugin

Description

The Vue plugin is used to transpile .vue files into Javascript.

Install

This package depends on the vue-template-compiler, vue-template-es2015-compiler and one of typescript and babel-core modules.

Also, if you want to include Vue library into the bundle, remember to install vue module too.

# Using yarn:
yarn add vue-template-compiler vue-template-es2015-compiler typescript babel-core vue --dev

# Using npm:
npm install vue-template-compiler vue-template-es2015-compiler typescript babel-core vue --save-dev

Example

// fuse.js

const { FuseBox, VuePlugin } = require('fuse-box')

const fsbx = FuseBox.init({
    homeDir: './src',
    output: 'dist/app.js',
    plugins: [
        VuePlugin()
    ]
})

fsbx.dev()

fsbx.bundle('app.js')
    .instructions('>index.ts')
    .watch()

fsbx.run()
// src/index.ts

import * as Vue from 'vue/dist/vue.js'
import * as App from './components/App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})
<!-- src/components/App.vue -->

<template>
    <div>
        <p>{{ msg }}</p>
        <input type="text" v-model="msg" />
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

Script transpiler

By default VuePlugin uses typescript to compile contents of <script></script>. By defining the lang attribute of the <script> tag, content can be compiled using desired transpiler. Currently only ts and babel are supported.

Babel

If babel attribute is given, VuePlugin will load babel config from there, otherwise VuePlugin will load .babelrc from the root of the project. If no config given and no rc found, it uses default config. Packages babel-core and babel-plugin-transform-es2015-modules-commonjs must be installed to use babel.

// Configuring babel in fuse.js (Default)
VuePlugin({
    babel: {
        config: {
            "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
})

// .babelrc
{
 "plugins": ["transform-es2015-modules-commonjs"]
}

Template engine preprocessor

By defining the lang attribute of the <template> tag, content can be compiled to HTML using your favorite template engine.

The consolidate module must be installed in addition to the template engine module you want to use.

View a list of all supported template engines.

Example using Pug:

# Using yarn:
yarn add consolidate pug --dev

# Using npm:
npm install consolidate pug --save-dev
<!-- src/components/App.vue -->

<template lang="pug">
    .content
        p {{ msg }}
        input(type="text", v-model="msg")
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>