1# vue-template-compiler23> This package is auto-generated. For pull requests please see [src/platforms/web/entry-compiler.js](https://github.com/vuejs/vue/tree/dev/src/platforms/web/entry-compiler.js).45This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. In most cases you should be using it with [`vue-loader`](https://github.com/vuejs/vue-loader), you will only need it separately if you are writing build tools with very specific needs.67## Installation89``` bash10npm install vue-template-compiler11```1213``` js14const compiler = require('vue-template-compiler')15```1617## API1819### compiler.compile(template, [options])2021Compiles a template string and returns compiled JavaScript code. The returned result is an object of the following format:2223``` js24{25  ast: ?ASTElement, // parsed template elements to AST26  render: string, // main render function code27  staticRenderFns: Array<string>, // render code for static sub trees, if any28  errors: Array<string> // template syntax errors, if any29}30```3132Note the returned function code uses `with` and thus cannot be used in strict mode code.3334#### Options3536- `outputSourceRange` *new in 2.6*37  - Type: `boolean`38  - Default: `false`3940  Set this to true will cause the `errors` returned in the compiled result become objects in the form of `{ msg, start, end }`. The `start` and `end` properties are numbers that mark the code range of the error source in the template. This can be passed on to the `compiler.generateCodeFrame` API to generate a code frame for the error.4142- `whitespace`43  - Type: `string`44  - Valid values: `'preserve' | 'condense'`45  - Default: `'preserve'`4647  The default value `'preserve'` handles whitespaces as follows:4849  - A whitespace-only text node between element tags is condensed into a single space.50  - All other whitespaces are preserved as-is.5152  If set to `'condense'`:5354  - A whitespace-only text node between element tags is removed if it contains new lines. Otherwise, it is condensed into a single space.55  - Consecutive whitespaces inside a non-whitespace-only text node are condensed into a single space.5657  Using condense mode will result in smaller compiled code size and slightly improved performance. However, it will produce minor visual layout differences compared to plain HTML in certain cases.5859  **This option does not affect the `<pre>` tag.**6061  Example:6263  ``` html64  <!-- source -->65  <div>66    <span>67      foo68    </span>   <span>bar</span>69  </div>7071  <!-- whitespace: 'preserve' -->72  <div> <span>73    foo74    </span> <span>bar</span> </div>7576  <!-- whitespace: 'condense' -->77  <div><span> foo </span> <span>bar</span></div>78  ```7980- `modules`8182  It's possible to hook into the compilation process to support custom template features. **However, beware that by injecting custom compile-time modules, your templates will not work with other build tools built on standard built-in modules, e.g `vue-loader` and `vueify`.**8384  An array of compiler modules. For details on compiler modules, refer to the `ModuleOptions` type in [flow declarations](https://github.com/vuejs/vue/blob/dev/flow/compiler.js#L47-L59) and the [built-in modules](https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler/modules).8586- `directives`8788  An object where the key is the directive name and the value is a function that transforms an template AST node. For example:8990  ``` js91  compiler.compile('<div v-test></div>', {92    directives: {93      test (node, directiveMeta) {94        // transform node based on directiveMeta95      }96    }97  })98  ```99100  By default, a compile-time directive will extract the directive and the directive will not be present at runtime. If you want the directive to also be handled by a runtime definition, return `true` in the transform function.101102  Refer to the implementation of some [built-in compile-time directives](https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler/directives).103104- `preserveWhitespace` **Deprecated since 2.6**105  - Type: `boolean`106  - Default: `true`107108  By default, the compiled render function preserves all whitespace characters between HTML tags. If set to `false`, whitespace between tags will be ignored. This can result in slightly better performance but may affect layout for inline elements.109110---111112### compiler.compileToFunctions(template)113114Similar to `compiler.compile`, but directly returns instantiated functions:115116``` js117{118  render: Function,119  staticRenderFns: Array<Function>120}121```122123This is only useful at runtime with pre-configured builds, so it doesn't accept any compile-time options. In addition, this method uses `new Function()` so it is not CSP-compliant.124125---126127### compiler.ssrCompile(template, [options])128129> 2.4.0+130131Same as `compiler.compile` but generates SSR-specific render function code by optimizing parts of the template into string concatenation in order to improve SSR performance.132133This is used by default in `vue-loader@>=12` and can be disabled using the [`optimizeSSR`](https://vue-loader.vuejs.org/options.html#optimizessr) option.134135---136137### compiler.ssrCompileToFunctions(template)138139> 2.4.0+140141Same as `compiler.compileToFunction` but generates SSR-specific render function code by optimizing parts of the template into string concatenation in order to improve SSR performance.142143---144145### compiler.parseComponent(file, [options])146147Parse a SFC (single-file component, or `*.vue` file) into a descriptor (refer to the `SFCDescriptor` type in [flow declarations](https://github.com/vuejs/vue/blob/dev/flow/compiler.js)). This is used in SFC build tools like `vue-loader` and `vueify`.148149---150151### compiler.generateCodeFrame(template, start, end)152153Generate a code frame that highlights the part in `template` defined by `start` and `end`. Useful for error reporting in higher-level tooling.154155#### Options156157#### `pad`158159`pad` is useful when you are piping the extracted content into other pre-processors, as you will get correct line numbers or character indices if there are any syntax errors.160161- with `{ pad: "line" }`, the extracted content for each block will be prefixed with one newline for each line in the leading content from the original file to ensure that the line numbers align with the original file.162- with `{ pad: "space" }`, the extracted content for each block will be prefixed with one space for each character in the leading content from the original file to ensure that the character count remains the same as the original file.