Sfc NPM | npm.io

sfc

A set of useful commands for dealing with Vue single-file components.

Install

yarn global add sfc
# or
npm i -g sfc

Commands

normalize

Normalize (pre-compile) each block of your SFC:

# normalize a .vue file
sfc normalize example.vue -o output.vue
# normalize all .vue files inside a directory
sfc normalize src -d lib

# you can even normalize src/*.js files if needed
src normalize src -d lib --include "*.js"

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

Supported transforms:

<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: nope.

Gotchas:

We don't handle tags that use src attribute for now, it will be left as is.

In:

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

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

<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 scoped>
.foo {
  color: #f00;
}
</style>