# @vue/component-compiler

> bundler agnostic API for compiling Vue SFC

Latest version **4.2.4** (published 2021-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue/component-compiler
pnpm add @vue/component-compiler
yarn add @vue/component-compiler
bun add @vue/component-compiler
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.2.4 |
| Published | 2021-05-05 |
| First published | 2018-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 49.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rahul Kadyan |
| Maintainers | znck, yyx990803, michalsnik, eddyerburgh, ktsn, nickmessing, akryum, mysticatea, soda, liximomo, dobromir-hristov, lmiller1990, linusborg, antfu, pikax, amour1688, posva, kiaking, afontcu |
| Keywords | vue, compiler, sfc |

## Links

- npm: https://www.npmjs.com/package/@vue/component-compiler
- Repository: https://github.com/vuejs/vue-component-compiler
- Homepage: https://github.com/vuejs/vue-component-compiler#readme
- Issues: https://github.com/vuejs/vue-component-compiler/issues
- npm.io page: https://npm.io/package/@vue/component-compiler

## Dependencies (9)

- [pug](https://npm.io/package/pug.md) ^3.0.1
- [less](https://npm.io/package/less.md) ^3.9.0
- [sass](https://npm.io/package/sass.md) ^1.18.0
- [stylus](https://npm.io/package/stylus.md) ^0.54.5
- [hash-sum](https://npm.io/package/hash-sum.md) ^1.0.2
- [clean-css](https://npm.io/package/clean-css.md) ^4.1.11
- [source-map](https://npm.io/package/source-map.md) 0.6.*
- [postcss-modules-sync](https://npm.io/package/postcss-modules-sync.md) ^1.0.0
- [@vue/component-compiler-utils](https://npm.io/package/@vue/component-compiler-utils.md) ^3.0.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 4.2.4 (latest) — 2021-05-05
- 4.2.3 — 2020-05-22
- 4.2.2 — 2020-05-22
- 4.2.1 — 2020-05-11
- 4.2.0 — 2019-11-21
- 4.1.0 — 2019-10-26
- 4.0.0 — 2019-04-11
- 3.6.0 — 2018-08-28
- 3.5.0 — 2018-08-28
- 3.4.5 — 2018-08-28
- 3.4.4 — 2018-07-31
- 3.4.3 — 2018-07-31
- 3.4.2 — 2018-07-13
- 3.4.1 — 2018-06-27
- 3.4.0 — 2018-06-24
- … 8 more at https://npm.io/package/@vue/component-compiler/versions

## README

# @vue/component-compiler [![Build Status](https://circleci.com/gh/vuejs/vue-component-compiler/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/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](https://github.com/vuejs/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.

```typescript
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](https://github.com/vuejs/component-compiler-utils/blob/master/README.md#compiletemplatetemplatecompileoptions-templatecompileresults) and [compileStyle](https://github.com/vuejs/component-compiler-utils/blob/master/README.md#compilestylestylecompileoptions) from [@vue/component-compiler-utils](https://github.com/vuejs/component-compiler-utils).

```typescript
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

```typescript
interface AssembleResults {
  code: string
  map?: any
}
```

```typescript
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.

---
_Source: https://npm.io/package/@vue/component-compiler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._