A standalone vue component compiler


1191.1.04 years ago5 years agoMinified + gzip package size for @gzzhanghao/vue-compiler in KB


Vue component compiler

Yet another vue component compiler.

NOTE: Please check out vue-loader and vueify if you'd like to run the compiler with webpack or browserify


npm i -S @gzzhanghao/vue-compiler


const compile = require('@gzzhanghao/vue-compiler').default

const filePath = 'index.vue'

const content = `
    <div> component contents </div>

const options = {
  // compiler options

compile(filePath, content, options).then(res => {
  if (res.errors) {
  // commonjs module code


type CompilerOptions = {

  includeFileName?: boolean // false
  // inject file path as module.__file

  compilerOptions?: Vue.CompilerOptions // null
  // options for vue template compiler

  extractStyles?: boolean // false
  // extract styles from the component
  // extracted styles are available in 'styles' field

  styleLoader?: string // "loadCss"
  // method to load css strings if not extracted
  // styles will be loaded with `${styleLoader}(${css_string}, ${scopeId})`

  postcss?: Array<PostCSSPlugin> // []
  // PostCSS plugin list

  postcssModules?: Object // null
  // options for PostCSS modules

  sourceMap?: boolean // false
  // enable sourcemap

  styleSourceMap?: boolean // false
  // enable sourcemap for styles
  // style's sourcemap will be inlined in the css string if not extracted

  sourceMapRoot?: string // "vue:///"
  // source root

  getCompiler?: CustomCompilerGetter // noop
  // get compiler for a block
  // return false to prevent resolving compiler from options.compilers

  compilers?: {
    // custom compilers for other languages

    [key: string]: CustomCompiler
    // keys will be matched to block's lang attribute and type

  hotReload?: { // null
    // hot reload options

    module: string
    // eg: "vue-hot-reload-api"

type BuildResult = CodeResult & {

  warnings: Array<WarningMessage>
  // compiler warnings

  scopeId?: string
  // component scope id

  styles?: Array<CodeResult>
  // extracted styles

type CodeResult = {
  code: string
  map?: SourceMapGenerator

type ErrorResult = {

  errors?: Array<WarningMessage>
  // vue parser errors

interface Compiler {

  default(filePath: string, content: string, options?: CompilerOptions): Promise<BuildResult | ErrorResult>

type WarningMessage = {
  msg: string
  start?: number
  end?: number

type CustomCompilerGetter = (item: BlockItem, options: CompilerOptions)?: CustomCompiler | false

type CustomCompiler = (item: BlockItem, options: Object): Promise<CodeResult & { warnings }>

type BlockItem = SFCBlock & {

  index?: number
  // exists if the block is a style block or a custom block

  filePath: string
  // origin file path passed into the compiler

  content: string
  // source content

  node: SourceNode
  // source node generated from filePath and content

  warnings: Array<WarningMessage>
  // warnings comes from custom compilers

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.