TypeScript icon, indicating that this package has built-in type declarations

    3.3.0 • Public • Published

    @vue/component-compiler-utils Build Status

    Lower level utilities for compiling Vue single file components

    This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in vue-loader version 15 and above.

    The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.

    Why isn't vue-template-compiler a peerDependency?

    Since this package is more often used as a low-level utility, it is usually a transitive dependency in an actual Vue project. It is therefore the responsibility of the higher-level package (e.g. vue-loader) to inject vue-template-compiler via options when calling the parse and compileTemplate methods.

    Not listing it as a peer depedency also allows tooling authors to use a non-default template compiler instead of vue-template-compiler without having to include it just to fullfil the peer dep requirement.


    parse(ParseOptions): SFCDescriptor

    Parse raw single file component source into a descriptor with source maps. The actual compiler (vue-template-compiler) must be passed in via the compiler option so that the specific version used can be determined by the end user.

    interface ParseOptions {
      source: string
      filename?: string
      compiler: VueTemplateCompiler
      // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options
      // default: { pad: 'line' }
      compilerParseOptions?: VueTemplateCompilerParseOptions
      sourceRoot?: string
      needMap?: boolean
    interface SFCDescriptor {
      template: SFCBlock | null
      script: SFCBlock | null
      styles: SFCBlock[]
      customBlocks: SFCCustomBlock[]
    interface SFCCustomBlock {
      type: string
      content: string
      attrs: { [key: string]: string | true }
      start: number
      end: number
      map?: RawSourceMap
    interface SFCBlock extends SFCCustomBlock {
      lang?: string
      src?: string
      scoped?: boolean
      module?: string | boolean

    compileTemplate(TemplateCompileOptions): TemplateCompileResults

    Takes raw template source and compile it into JavaScript code. The actual compiler (vue-template-compiler) must be passed in via the compiler option so that the specific version used can be determined by the end user.

    It can also optionally perform pre-processing for any templating engine supported by consolidate.

    interface TemplateCompileOptions {
      source: string
      filename: string
      compiler: VueTemplateCompiler
      // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options
      // default: {}
      compilerOptions?: VueTemplateCompilerOptions
      // Template preprocessor
      preprocessLang?: string
      preprocessOptions?: any
      // Transform asset urls found in the template into `require()` calls
      // This is off by default. If set to true, the default value is
      // {
      //   audio: 'src',
      //   video: ['src', 'poster'],
      //   source: 'src',
      //   img: 'src',
      //   image: ['xlink:href', 'href'],
      //   use: ['xlink:href', 'href']
      // }
      transformAssetUrls?: AssetURLOptions | boolean
      // For vue-template-es2015-compiler, which is a fork of Buble
      transpileOptions?: any
      isProduction?: boolean  // default: false
      isFunctional?: boolean  // default: false
      optimizeSSR?: boolean   // default: false
      // Whether prettify compiled render function or not (development only)
      // default: true
      prettify?: boolean
    interface TemplateCompileResult {
      ast: Object | undefined
      code: string
      source: string
      tips: string[]
      errors: string[]
    interface AssetURLOptions {
      [name: string]: string | string[]

    Handling the Output

    The resulting JavaScript code will look like this:

    var render = function (h) { /* ... */}
    var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}]

    It does NOT assume any module system. It is your responsibility to handle the exports, if needed.


    Take input raw CSS and applies scoped CSS transform. It does NOT handle pre-processors. If the component doesn't use scoped CSS then this step can be skipped.

    interface StyleCompileOptions {
      source: string
      filename: string
      id: string
      map?: any
      scoped?: boolean
      trim?: boolean
      preprocessLang?: string
      preprocessOptions?: any
      postcssOptions?: any
      postcssPlugins?: any[]
    interface StyleCompileResults {
      code: string
      map: any | void
      rawResult: LazyResult | void // raw lazy result from PostCSS
      errors: string[]


    Same as compileStyle(StyleCompileOptions) but it returns a Promise resolving to StyleCompileResults. It can be used with async postcss plugins.


    npm i @vue/component-compiler-utils

    DownloadsWeekly Downloads






    Unpacked Size

    65.8 kB

    Total Files


    Last publish


    • znck
    • yyx990803
    • michalsnik
    • eddyerburgh
    • ktsn
    • nickmessing
    • akryum
    • mysticatea
    • soda
    • liximomo
    • dobromir-hristov
    • lmiller1990
    • linusborg
    • antfu
    • pikax
    • amour1688
    • posva
    • kiaking
    • afontcu