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.

Package Sidebar


npm i @vue/component-compiler-utils

Weekly Downloads






Unpacked Size

65.8 kB

Total Files


Last publish


  • akryum
  • yyx990803
  • soda