Pre-compile each blocks of your Vue single-file components.
Last updated a year ago by egoist .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-compile 
SYNC missed versions from official npm registry.


Compile the blocks in Vue single-file components to JS/CSS from Babel/Sass/Stylus.

Why This Approach

We want to publish .vue files instead of transformed .js files on npm because the .vue file is preferred in some scenarioes, e.g. vue-server-renderer can inline critical CSS from <style> blocks.

And we use this library to compile the blocks in .vue files to use standard languages so that you can use languages like Sass and your users don't have to install node-sass and sass-loader just for using your components.


yarn global add vue-compile
# or
npm i -g vue-compile


# normalize a .vue file
vue-compile example.vue -o output.vue
# normalize a directory
# non .vue files will be simply copied to output directory
vue-compile src -o lib

Then you can publish normalized .vue files to npm registry without compiling them to .js files.

Supported transforms (via lang attribute):

  • <template> tag:
    • html (default)
  • <script> tag:
    • babel (default): use our default babel preset or your own .babelrc
    • ts typescript: use our default babel preset + @babel/preset-typescript
  • <style> tag:
    • postcss (default): use your own postcss.config.js
    • stylus sass scss
  • Custom blocks: They are not touched.


  • We only handle src attribute for <style> blocks, we simply replace the extension with .css and remove the lang attribute.


  <div class="foo">
    {{ count }}

export default {
  data() {
    return {
      count: 0

<style lang="scss" src="./foo.scss">

<style lang="stylus" scoped>
@import './colors.styl'

  color: $color


  <div class="foo">
    {{ count }}

export default {
  data: function data() {
    return {
      count: 0

<style src="./foo.css">

<style scoped>
.foo {
  color: #f00;

Compile Standalone CSS Files

CSS files like .css .scss .sass .styl will be compiled to output directory with .css extension, all relevant import statements in .js .ts or <script> blocks will be changed to use .css extension as well.

You can exclude them using the --exclude "**/*.{css,scss,sass,styl}" flag.


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


vue-compile © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list). · GitHub @egoist · Twitter @_egoistlily

Current Tags

  • 0.6.1-canary.17.eabb05c                                ...           canary (a year ago)
  • 0.6.0                                ...           latest (a year ago)

10 Versions

  • 0.6.1-canary.17.eabb05c                                ...           a year ago
  • 0.6.1-canary.17.6ca7886                                ...           a year ago
  • 0.6.0                                ...           a year ago
  • 0.5.3                                ...           a year ago
  • 0.5.2                                ...           a year ago
  • 0.5.1                                ...           a year ago
  • 0.5.0                                ...           a year ago
  • 0.4.0                                ...           a year ago
  • 0.3.1                                ...           a year ago
  • 0.3.0                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 39
Dependencies (18)
Dev Dependencies (6)
Dependents (0)

Copyright 2014 - 2016 © |