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

    4.2.4 • Public • Published

    @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.


    npm i @vue/component-compiler

    DownloadsWeekly Downloads






    Unpacked Size

    50.3 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