Vue Template Compiler

2.0.6 verified Fri May 01 auth: no javascript maintenance

Vue 2.0 template compiler that pre-compiles Vue templates into render functions, avoiding runtime compilation and CSP restrictions. Version 2.0.6 is the current stable release for Vue 2.x, maintained by the Vue core team. Use cases include build tools like vue-loader and vueify. Differentiator: provides AST access and compile-time options (custom modules/directives) unlike higher-level tools. Note: Not needed for most users; use vue-loader or vueify instead.

Common errors

error Cannot find module 'vue-template-compiler' ↓

cause Package not installed or used in a browser context without bundler.

fix

Install via npm install vue-template-compiler and use with Node.js or a bundler (Webpack/Rollup).

error Uncaught Error: 'with' statement is not allowed in strict mode ↓

cause Using compile() output in strict mode JavaScript (e.g., ES modules in strict mode).

fix

Use compileToFunctions() instead, which returns a function without 'with' statement.

error TypeError: compiler.compileToFunctions is not a function ↓

cause Wrong import: imported default instead of named export.

fix

Use const { compileToFunctions } = require('vue-template-compiler').

Warnings

gotcha Generated render function uses `with` and thus cannot be used in strict mode code. ↓

fix Either avoid strict mode or use compileToFunctions which returns a function usable in strict mode (but uses new Function() and is not CSP-compliant).

gotcha compileToFunctions() uses new Function() which violates CSP (Content Security Policy) restrictions. ↓

fix Use compile() output (string) with a CSP-compliant eval strategy, or pre-compile via build tools.

broken Incorrect import path for TypeScript: 'vue-template-compiler' does not ship type definitions; types are under 'vue/types/compiler'. ↓

fix Use `import { compile } from 'vue-template-compiler'` with @types/vue installed.

deprecated For Vue 3 projects, this package is not compatible; use @vue/compiler-sfc instead. ↓

fix Migrate to @vue/compiler-sfc for Vue 3.

Install

npm install vip-template-compiler

yarn add vip-template-compiler

pnpm add vip-template-compiler

Imports

compiler

wrong

import compiler from 'vue-template-compiler'

correct

const compiler = require('vue-template-compiler')

Uses CommonJS; ESM import may cause issues. Default import works if configured.

compile

const { compile } = require('vue-template-compiler')

Direct method import for compile with options.

compileToFunctions

const { compileToFunctions } = require('vue-template-compiler')

Returns instantiated functions; not CSP-compliant.

parseComponent

const { parseComponent } = require('vue-template-compiler')

Parses .vue SFC files into descriptors.

Quickstart

Demonstrates basic usage of compile() and compileToFunctions() methods.

const compiler = require('vue-template-compiler');
const template = '<div>{{ message }}</div>';
const result = compiler.compile(template);
console.log(result.render);
// Output: render function code (string) with `with(this)`
const compiled = compiler.compileToFunctions(template);
// compiled.render is a Function
console.log(compiled.render);