vue-compile

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

Why This Approach

You may 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.

This tool will transform each block in the .vue file to their standard conterparts like sass -> css so your users don't have to install additional libraries to compile it.

It also provides a --preserve-ts-block flag if you don't want to transpile TypeScript, because tools like Vite supports TypeScript out of the box. In this way you don't need to generate .d.ts for your Vue components either, thanks to Volar.

Install

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

Usage

# 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, you can use --preserve-ts-block flag to preserve types, i.e. disable typescript transformation
• <style> tag:
  • postcss (default): use your own postcss.config.js
  • stylus sass scss
• Custom blocks: They are not touched.

Gotchas:

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

Example

In:

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

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

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

.foo 
  color: $color
</style>

Out:

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

<script>
export default {
  data: function data() {
    return {
      count: 0
    };
  }
};
</script>

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

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

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.

Contributing

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

Author

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

github.com/egoist · GitHub @egoist · Twitter @_egoistlily