vue-template-compiler

vue-template-compiler is the standalone build-time compiler auto-generated from Vue 2’s internal src/platforms/web/entry-compiler.ts entry point. It exposes compile/compileToFunctions to turn Vue 2 single-file-component templates into JavaScript render functions before the app ships, so browsers never have to run the compiler themselves. This matters for two reasons: it removes the runtime cost of parsing templates on every page load, and it lets apps ship without eval/new Function-based compilation, which is blocked under strict Content-Security-Policy rules.

In practice almost nobody calls this package directly. It is the compiler dependency that vue-loader (webpack) and vueify (Browserify) pull in behind the scenes to precompile .vue files during a build step, and it also ships parseComponent for splitting a .vue file into its template/script/style blocks, plus SSR-specific compile variants (ssrCompile, ssrCompileToFunctions) used by vue-server-renderer. Because Vue 2 reached end-of-life on December 31, 2023, this package is functionally frozen at its final release; it remains widely installed only because it is a required peer/transitive dependency of every still-running Vue 2 build pipeline.

What You Get

• compile() - turns a template string into { ast, render, staticRenderFns, errors } for build-time precompilation.
• compileToFunctions() - same pipeline but returns instantiated JS functions directly, for environments without CSP restrictions.
• ssrCompile() / ssrCompileToFunctions() - server-rendering-optimized variants that convert parts of the template into string concatenation for faster SSR output.
• parseComponent() - splits a raw .vue Single-File Component into its template/script/style block descriptor, the primitive vue-loader builds on.
• generateCodeFrame() - renders a source-mapped code frame around a template parse error for readable build-time diagnostics.
• Pluggable compiler modules and directives options so custom template features (e.g. custom v-* directives) can hook into parsing and codegen.

Common Use Cases

• Webpack builds via vue-loader - vue-loader calls into vue-template-compiler under the hood to precompile each .vue file’s <template> block during bundling.
• Browserify builds via vueify - the Browserify equivalent of vue-loader uses the same compiler package for build-time transformation.
• Strict-CSP applications - apps that disallow unsafe-eval must precompile templates ahead of time instead of compiling them in the browser at runtime.
• Custom Vue 2 build tooling - authors writing bespoke bundler plugins or SFC tooling for legacy Vue 2 codebases call parseComponent/compile directly.
• Server-side rendering pipelines - vue-server-renderer uses the SSR-optimized compile variants to generate faster string-concatenation render output.

Under The Hood

Architecture

The package is a thin, auto-generated wrapper (src/platforms/web/entry-compiler.ts) around Vue 2’s core compiler pipeline in src/compiler/: parser/index.ts turns a template string into an AST via a streaming HTML tokenizer (html-parser.ts), optimizer.ts walks the AST marking static subtrees so codegen can skip re-rendering them, and codegen/index.ts emits render-function source strings from the optimized AST. create-compiler.ts wraps this base pipeline in a createCompilerCreator factory so the same parser/optimizer/codegen stages can be reused to build both the standard browser compiler and the SSR-optimized variant exported by server/compiler; error-detector.ts runs a separate pass over the AST to flag disallowed JS keywords or unary operators inside template expressions before codegen. The published npm package itself is not source-built from this repo directly — it is generated by scripts/build.js/scripts/config.js, which bundle the compiler entry point into packages/template-compiler/build.js and browser.js as part of Vue 2’s monorepo release process.

Tech Stack

Written in TypeScript against Vue 2’s internal types/compiler declarations, built with a custom Rollup-based script (scripts/build.js) rather than a standard bundler config, and typed via hand-maintained .d.ts files rather than auto-generated ones. Runtime dependencies are minimal and intentionally low-level: de-indent for cleaning up indentation in extracted <script>/<style> blocks, and he for HTML entity encoding/decoding during parsing — reflecting that this package must run in both Node build tooling and legacy browser targets with no heavier dependencies.

Code Quality

The compiler core has dedicated unit tests under test/unit/modules/compiler/ and test/unit/modules/server-compiler/ covering the parser, codegen, optimizer, error-detector code frames, and compiler options, run via Vitest as part of Vue 2’s broader npm test pipeline (ts-check, test:unit, test:ssr, test:e2e, test:sfc). Error handling favors explicit warning/error accumulation (a warn callback pushed into errors/tips arrays with optional source-range metadata) over throwing, so template mistakes surface as structured diagnostics rather than crashes. Since Vue 2 reached end-of-life in December 2023, the compiler is now feature-frozen — CI configuration and lint-staged hooks remain in place, but no new commits land against this code.

What Makes It Unique

Unlike most template compilers that only target one output mode, this codebase’s createCompilerCreator abstraction lets the identical parser/optimizer/AST pipeline be reused to emit either standard render functions or SSR-optimized string-concatenation output from server/compiler, avoiding a second parallel implementation for server rendering. Its parseComponent SFC-splitting primitive is also the actual building block that downstream tools like vue-loader and vueify depend on for .vue file support, rather than each tool reimplementing SFC parsing independently.