Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@vue/component-compiler

vuejs138.2kMIT4.2.4TypeScript support: included

bundler agnostic API for compiling Vue SFC

vue, compiler, sfc

readme

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

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

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

4.2.4 (2021-05-05)

4.2.3 (2020-05-22)

Bug Fixes

4.2.2 (2020-05-22)

Bug Fixes

  • produce deterministic css class names for css modules (#101) (b8bfc58)

4.2.1 (2020-05-11)

Bug Fixes

  • add pure annotation for tree shaking support (#96) (7b4dceb)

4.2.0 (2019-11-21)

Features

  • use vue_component identifier for normalized component and default export (#91) (fb1ab41)

4.1.0 (2019-10-26)

Features

4.0.0 (2019-04-11)

Bug Fixes

Chores

Features

  • Add compileToDescriptorAsync and compileStyleAsync methods (ccf7d84)
  • Allow disabling clean CSS (9d43b80)

BREAKING CHANGES

3.6.0 (2018-08-28)

Features

  • Add compileToDescriptorAsync and compileStyleAsync methods (ccf7d84)

3.5.0 (2018-08-28)

Features

  • Allow disabling clean CSS (9d43b80)

3.4.5 (2018-08-28)

Bug Fixes

  • Do not generate style injector code if component has no style (78a2da3)

3.4.4 (2018-07-31)

3.4.3 (2018-07-31)

Bug Fixes

  • Use basename for __file in production mode (541a824)

3.4.2 (2018-07-13)

3.4.1 (2018-06-27)

Bug Fixes

  • Add scope ID only if scoped style is present (1a42be3), closes #75

3.4.0 (2018-06-24)

Features

  • preprocessor data option to prepend shared styles (#73) (5a81749)
  • Script source map support in assemble (#74) (13cd119)

3.3.3 (2018-05-25)

Bug Fixes

  • Resolve src values on style blocks with require.resolve (#70) (0e8e005)
  • Use options from Vue.extend constructor export from script block (#69) (4280da0)

3.3.2 (2018-05-13)

Bug Fixes

  • Prevent duplicate style injection (#68) (58247ce)

3.3.1 (2018-05-09)

Bug Fixes

  • Inject CSS module tokens even when css is not present (#67) (05c5210)

3.3.0 (2018-05-07)

Features

  • Change visibilty of compileStyle and compileTemplate methods to public (#66) (c505f94)

3.3.0 (2018-05-07)

Features

  • Change visibilty of compileStyle and compileTemplate methods to public (#66) (c505f94)

3.2.0 (2018-05-06)

Features

  • Skip style injection when style soure is empty (#65) (5726a24)

3.2.0 (2018-05-06)

Features

  • Skip style injection when style soure is empty (#65) (5726a24)

3.1.1 (2018-05-02)

Features

  • Use global variables as style source (#64) (14c6a3d)

3.1.1 (2018-05-02)

Features

  • Use global variables as style source (#64) (14c6a3d)

3.1.0 (2018-05-01)

Bug Fixes

  • add main and typings in package.json (5d5790a)
  • circleci build yarn installation script (8d54b92)
  • ensure split for files generated on windows (dfc0ec2)
  • expect moduleIdentifier in assemble step (0ba6e8b)
  • generate sourcemaps even if previous maps are provided (0bee641)
  • inject style for non-modules too (9a30f9e)
  • remove postcss config loader (f4ccc7c)
  • remove unnecessary extension (043f54b)
  • style-compiler source maps & use vue-component-compiler instead of vue-loader in logs (fef6fdd)
  • update gen-id implementation (#43) (72ff0bb), closes #42
  • use configure vueHotReloadAPI when available (19be9bf)
  • use import statements for style when assembling in esModule mode (513fe46)

Features

  • add css modules capability to style-compiler (d413d22)
  • add runtime component helpers (5f7d136)
  • add synchronous compilers (f136528)
  • add ts typings (8cc4f5f)
  • allow additional properties in options (#56) (a23740f)
  • assemble inline when content is provided (#35) (da252a7), closes #31 #38 #39
  • component parts assembler (5deae78)
  • export component compilers (cf11514)
  • SFC to descriptors parser (076d414)
  • source map cache busting option (#48) (93b6847), closes #46
  • style compiler to add scope-id (6b9dc62)
  • style-compiler should process one style block at a time (e6fa1ba)
  • support for functional template compilation (#45) (63b91f7), closes #44 #37
  • support wildcard tag in transformToRequire (#41) (f8a36c7), closes #40
  • template to render function compiler (c4fc825)
  • transform require to import statements in esModule (#54) (833605d)
  • use @vue/component-compiler-utils to provide high level component compilation API (#59) (976d4f1)
  • Use custom implementation of normalizer if provided (#61) (18cb7c1)

3.1.0 (2018-05-01)

Features

  • Use custom implementation of normalizer if provided (37f6cd8)