vue-file-compiler v1.0.4

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).