vbuild 0.5.0

A simple module to extract html/script/style from a vuejs '.vue' file (can minimize/es2015 compliant js) ... just py2 or py3, NO nodejs !

vbuild

"Compile" your VUEJS component (*.vue) to standalone html/js/css ... python only (no need of nodejs). BTW it provides a js-minimizer (es2015 compliant code)

BREAKING NEWS : a future version will be able to make your component (script) in PURE PYTHON ! (my tests are really great ! stay tuned !!)

It's just an utility to extract HTML(template), SCRIPT and STYLE from a VUE/SFC component (*.vue). It's PURE python (py2 & py3 compatible), no nodejs ! It's fully unitested (100% !)

It won't replace webpack/nodejs/vue-cli, it fills the "Sometimes you have to work with the tools you have, not the ones you want." gap.

Available on pypi

import vbuild

c=vbuild.render("mycompo.vue")
#c=vbuild.render("vues/*.vue")
#c=vbuild.render( ["c1.vue","c2.vue"] )
#c=vbuild.render( ["main.vue","vues/*.vue"] )
print( c.html )
print( c.script )
print( c.style )

You can use sass(new syntax only) (using <style lang="scss"></style> or <style lang="sass"></style>) or less (using <style lang="less"></style>) in your styles. But you'll need to install pyscss or lesscpy, depending on your needs.

By the way, the module provide a js-minimizer(transpiler) (to generate ES5 compliant js) (thru on the clojure online service)

js="""async function  mymethod(...a) {
    var f=(...a) => {let b=12}
}
"""
min=vbuild.minimize(js)

Notes:

• templates are converted to a <script type="text/x-template" id="XXX"></script> (not converted to JS)
• A Minimal component needs the <template></template> tag only (specs)
• You can use <style></style> and/or <style scoped></style> (as many as you want)
• styles are minimized (remove comments and spaces)

Its main purpose is to let you use components (.vue files) in your vuejs app, without a full nodejs stack. It's up to you to create your generator, to extract the things, and create your "index.html" file. It's a 4 lines of python code; example:

import vbuild
buf=readYourTemplate("index.tpl") # should contains a tag "<!-- HERE -->" that would be substituted
buf=buf.replace("<!-- HERE -->",str( vbuild.render( "vues/*.vue" ) ) )
writeYourTemplate("index.html",buf)

If you use sass or less, you can define partial like this:

import vbuild
vbuild.partial="$color: red;"
buf=readYourTemplate("index.tpl") # should contains a tag "<!-- HERE -->" that would be substituted
buf=buf.replace("<!-- HERE -->",str( vbuild.render( "vues/*.vue" ) ) )
writeYourTemplate("index.html",buf)

(a real example of rendering vue/sfc components, using vbuild and the marvelous wuy)

Hope it could help ...

TODO:

• more utilities
• and docs !