vue-file-compiler

Vue single-file compiler

Allow you to compile single-file vue components to js and css strings.

Example :

Component.vue :

<template>
 
    <div>
        {{ variable }}
    </div>
 
</template>
 
<script>
import test from './test'
 
export default
{
    data()
    {
        return
        {
            variable: test
        }
    }
}
</script> 
 
<style lang="scss">
.body
{
    color: green;
}
</style> 

How to use vue-file-compiler :

const fs = require('fs')
const compiler = require('vue-file-compiler')
 
let vueSource = fs.readFileSync('./Component.vue', 'utf-8')
let result = compiler(vueSource)
 
console.log(result.js)

result.js will output as a string :

import test from './test'
 
var component =
{
    data()
    {
        return
        {
            variable: test
        }
    }
}
 
component.template = `
<div>
    {{ variable }}
</div>
`
 
component

Then, you just have to do :

const fs = require('fs')
const compiler = require('vue-file-compiler')
 
let vueSource = fs.readFileSync('./Component.vue', 'utf-8')
let result = compiler(vueSource)
 
const Vue = require('vue')
let component = eval(result.js)
Vue.component('component', component)

To get the style as a string, use result.style. To get the "lang" attribute of the style, use result.styleLang (it will be css if the "lang" attribute is not specified).