@vue/component-compiler

@vue/component-compiler

High level utilities for compiling Vue single file components

This package contains high 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 rollup-plugin-vue version 3 and above.

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

API

createDefaultCompiler(Options): SFCCompiler

Creates a compiler instance.

interface Options {
  script?: ScriptOptions
  style?: StyleOptions
  template?: TemplateOptions
}

interface ScriptOptions {
  preprocessorOptions?: any
}

interface StyleOptions {
  postcssOptions?: any
  postcssPlugins?: any[]
  postcssModulesOptions?: any
  preprocessOptions?: any
  postcssCleanOptions?: any
  trim?: boolean
}

interface TemplateOptions {
  compiler: VueTemplateCompiler
  compilerOptions: VueTemplateCompilerOptions
  preprocessOptions?: any
  transformAssetUrls?: AssetURLOptions | boolean
  transpileOptions?: any
  isProduction?: boolean
  optimizeSSR?: boolean
}

SFCCompiler.compileToDescriptor(filename: string, source: string): DescriptorCompileResult

Takes raw source and compiles each block separately. Internally, it uses compileTemplate and compileStyle from @vue/component-compiler-utils.

interface DescriptorCompileResult {
  customBlocks: SFCBlock[]
  scopeId: string
  script?: CompileResult
  styles: StyleCompileResult[]
  template?: TemplateCompileResult & { functional: boolean }
}

interface CompileResult {
  code: string
  map?: any
}

interface StyleCompileResult {
  code: string
  map?: any
  scoped?: boolean
  media?: string
  moduleName?: string
  module?: any
}

interface TemplateCompileResult {
  code: string;
  source: string;
  tips: string[];
  errors: string[];
  functional: boolean;
}

Handling the Output

The blocks from the resulting descriptor should be assembled into JavaScript code:

assemble(compiler: SFCCompiler, filename: string, result: DescriptorCompileResult, options: AssembleOptions): AssembleResults

interface AssembleResults {
  code: string
  map?: any
}

interface AssembleOptions {
  normalizer?: string
  styleInjector?: string
  styleInjectorSSR?: string
}

The assemble method is an example implementation for how to combine various parts from the descriptor. You can provide custom implementations for normalizer, styleInjector and styleInjectorSSR:

• Directly in-lined (default)
• Using a global function (normalizer: 'myComponentNormalizer')
• Using an import ({ normalizer: '~my-component-normalizer' })

The assemble method also accepts global variable name in source, map and module of styles.

Changelog

4.2.4 (2021-05-05)

<a name="4.2.3"></a>