bundler agnostic API for compiling Vue SFC

Usage no npm install needed!

<script type="module">
  import vueComponentCompiler from 'https://cdn.skypack.dev/@vue/component-compiler';


@vue/component-compiler Build Status

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.


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.