# @vue/component-compiler-utils

> Lower level utilities for compiling Vue single file components

Latest version **3.3.0** (published 2021-10-26) · MIT license · 0 weekly downloads

## Install

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

## 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 | 3.3.0 |
| Published | 2021-10-26 |
| First published | 2018-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 64.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 324 |
| Author | Evan You |
| Maintainers | znck, yyx990803, michalsnik, eddyerburgh, ktsn, nickmessing, akryum, mysticatea, soda, liximomo, dobromir-hristov, lmiller1990, linusborg, antfu, pikax, amour1688, posva, kiaking, afontcu |
| Keywords | vue, sfc, component, compiler |

## Links

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

## Dependencies (9)

- [postcss](https://npm.io/package/postcss.md) ^7.0.36
- [hash-sum](https://npm.io/package/hash-sum.md) ^1.0.2
- [prettier](https://npm.io/package/prettier.md) ^1.18.2 || ^2.0.0
- [lru-cache](https://npm.io/package/lru-cache.md) ^4.1.2
- [source-map](https://npm.io/package/source-map.md) ~0.6.1
- [consolidate](https://npm.io/package/consolidate.md) ^0.15.1
- [merge-source-map](https://npm.io/package/merge-source-map.md) ^1.1.0
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^6.0.2
- [vue-template-es2015-compiler](https://npm.io/package/vue-template-es2015-compiler.md) ^1.9.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

- 3.3.0 (latest) — 2021-10-26
- 3.2.2 — 2021-06-15
- 3.2.1 — 2021-06-09
- 3.2.0 — 2020-07-22
- 3.1.2 — 2020-04-08
- 3.1.1 — 2020-01-06
- 3.1.0 — 2019-12-08
- 3.0.2 — 2019-11-06
- 3.0.1 — 2019-11-04
- 3.0.0 — 2019-04-11
- 2.6.0 — 2019-02-21
- 2.5.2 — 2019-01-31
- 2.5.1 — 2019-01-25
- 2.5.0 — 2019-01-08
- 2.4.0 — 2019-01-02
- … 13 more at https://npm.io/package/@vue/component-compiler-utils/versions

## README

# @vue/component-compiler-utils [![Build Status](https://circleci.com/gh/vuejs/component-compiler-utils/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/component-compiler-utils/)

> Lower level utilities for compiling Vue single file components

This package contains lower 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 [vue-loader](https://github.com/vuejs/vue-loader) version 15 and above.

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

## Why isn't `vue-template-compiler` a peerDependency?

Since this package is more often used as a low-level utility, it is usually a transitive dependency in an actual Vue project. It is therefore the responsibility of the higher-level package (e.g. `vue-loader`) to inject `vue-template-compiler` via options when calling the `parse` and `compileTemplate` methods.

Not listing it as a peer depedency also allows tooling authors to use a non-default template compiler instead of `vue-template-compiler` without having to include it just to fullfil the peer dep requirement.

## API

### parse(ParseOptions): SFCDescriptor

Parse raw single file component source into a descriptor with source maps. The actual compiler (`vue-template-compiler`) must be passed in via the `compiler` option so that the specific version used can be determined by the end user.

``` ts
interface ParseOptions {
  source: string
  filename?: string
  compiler: VueTemplateCompiler
  // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options
  // default: { pad: 'line' }
  compilerParseOptions?: VueTemplateCompilerParseOptions
  sourceRoot?: string
  needMap?: boolean
}

interface SFCDescriptor {
  template: SFCBlock | null
  script: SFCBlock | null
  styles: SFCBlock[]
  customBlocks: SFCCustomBlock[]
}

interface SFCCustomBlock {
  type: string
  content: string
  attrs: { [key: string]: string | true }
  start: number
  end: number
  map?: RawSourceMap
}

interface SFCBlock extends SFCCustomBlock {
  lang?: string
  src?: string
  scoped?: boolean
  module?: string | boolean
}
```

### compileTemplate(TemplateCompileOptions): TemplateCompileResults

Takes raw template source and compile it into JavaScript code. The actual compiler (`vue-template-compiler`) must be passed in via the `compiler` option so that the specific version used can be determined by the end user.

It can also optionally perform pre-processing for any templating engine supported by [consolidate](https://github.com/tj/consolidate.js/).

``` ts
interface TemplateCompileOptions {
  source: string
  filename: string

  compiler: VueTemplateCompiler
  // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options
  // default: {}
  compilerOptions?: VueTemplateCompilerOptions

  // Template preprocessor
  preprocessLang?: string
  preprocessOptions?: any

  // Transform asset urls found in the template into `require()` calls
  // This is off by default. If set to true, the default value is
  // {
  //   audio: 'src',
  //   video: ['src', 'poster'],
  //   source: 'src',
  //   img: 'src',
  //   image: ['xlink:href', 'href'],
  //   use: ['xlink:href', 'href']
  // }
  transformAssetUrls?: AssetURLOptions | boolean

  // For vue-template-es2015-compiler, which is a fork of Buble
  transpileOptions?: any

  isProduction?: boolean  // default: false
  isFunctional?: boolean  // default: false
  optimizeSSR?: boolean   // default: false

  // Whether prettify compiled render function or not (development only)
  // default: true
  prettify?: boolean
}

interface TemplateCompileResult {
  ast: Object | undefined
  code: string
  source: string
  tips: string[]
  errors: string[]
}

interface AssetURLOptions {
  [name: string]: string | string[]
}
```

#### Handling the Output

The resulting JavaScript code will look like this:

``` js
var render = function (h) { /* ... */}
var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}]
```

It **does NOT** assume any module system. It is your responsibility to handle the exports, if needed.

### compileStyle(StyleCompileOptions)

Take input raw CSS and applies scoped CSS transform. It does NOT handle pre-processors. If the component doesn't use scoped CSS then this step can be skipped.

``` ts
interface StyleCompileOptions {
  source: string
  filename: string
  id: string
  map?: any
  scoped?: boolean
  trim?: boolean
  preprocessLang?: string
  preprocessOptions?: any
  postcssOptions?: any
  postcssPlugins?: any[]
}

interface StyleCompileResults {
  code: string
  map: any | void
  rawResult: LazyResult | void // raw lazy result from PostCSS
  errors: string[]
}
```

### compileStyleAsync(StyleCompileOptions)

Same as `compileStyle(StyleCompileOptions)` but it returns a Promise resolving to `StyleCompileResults`. It can be used with async postcss plugins.

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