{"id":12598,"library":"vue-template-compiler","title":"Vue Template Compiler (Vue 2)","description":"The `vue-template-compiler` package is an internal component of the Vue 2 ecosystem, designed to pre-compile Vue 2.x template strings into JavaScript render functions. This process reduces runtime overhead, improves performance, and allows Vue applications to operate in environments with Content Security Policy (CSP) restrictions by avoiding `eval` usage. The current and final stable version is `2.7.16` (\"Swan Song\"), released as part of Vue 2.7, which aimed to backport some Vue 3 Composition API features to Vue 2. This package, like Vue 2 itself, reached its official End of Life (EOL) on December 31st, 2023, meaning it will no longer receive updates, bug fixes, or security patches. While direct usage is possible for custom build tools, it was primarily designed to be consumed by build integrations like `vue-loader` for Webpack or similar tools, providing the core compilation logic for `.vue` single file components.","status":"abandoned","version":"2.7.16","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue","tags":["javascript","vue","compiler","typescript"],"install":[{"cmd":"npm install vue-template-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add vue-template-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-template-compiler","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CommonJS is the primary module system for Vue 2 ecosystem components like this. The `compiler` object contains methods like `compile` and `generateCodeFrame`.","symbol":"compiler","correct":"const compiler = require('vue-template-compiler')"},{"note":"While possible via destructuring the CommonJS module.exports object, direct named imports are less common than importing the whole `compiler` object for Vue 2 utilities.","symbol":"compile","correct":"const { compile } = require('vue-template-compiler')"},{"note":"For TypeScript or ES Modules, the module is typically imported as a namespace object due to its CommonJS export structure. Individual functions like `compile` are then accessed as properties of this object (`compiler.compile`).","wrong":"import { compile } from 'vue-template-compiler'","symbol":"compiler (TypeScript/ESM)","correct":"import * as compiler from 'vue-template-compiler'"}],"quickstart":{"code":"import * as compiler from 'vue-template-compiler';\n\nconst template = `\n<div id=\"app\">\n  <h1>{{ message }}</h1>\n  <p v-if=\"showParagraph\">This is a paragraph.</p>\n  <button @click=\"toggleParagraph\">Toggle</button>\n</div>`;\n\nconst compiled = compiler.compile(template, {\n  whitespace: 'condense' // Optimize for smaller output\n});\n\nif (compiled.errors.length) {\n  console.error('Template compilation errors:\\n' + compiled.errors.join('\\n'));\n  process.exit(1);\n}\n\nconsole.log('--- Render Function ---\\n' + compiled.render);\nconsole.log('\\n--- Static Render Functions ---\\n' + compiled.staticRenderFns.join('\\n'));\n\n// Example of how the render function would roughly be used at runtime (requires Vue 2)\n// const app = new Vue({\n//   el: '#app',\n//   data: {\n//     message: 'Hello, Vue 2!',\n//     showParagraph: true\n//   },\n//   methods: {\n//     toggleParagraph() {\n//       this.showParagraph = !this.showParagraph;\n//     }\n//   },\n//   render: new Function(compiled.render)() // DANGER: Uses eval-like Function constructor\n// });\n","lang":"typescript","description":"This quickstart demonstrates compiling a simple Vue 2 template into render functions using `vue-template-compiler`. It outputs the main render function and any static render functions, illustrating the core functionality of the package. It also shows an example of using the `whitespace` option."},"warnings":[{"fix":"Plan a migration path to Vue 3. For continued support on Vue 2 beyond EOL, consider third-party extended support options or use Vue 2.7 as the final version for maintenance-only projects.","message":"Vue 2 and its entire ecosystem, including `vue-template-compiler`, reached End of Life (EOL) on December 31st, 2023. There will be no further updates, bug fixes, or security patches. It is strongly recommended to migrate to Vue 3.","severity":"breaking","affected_versions":">=2.7.16"},{"fix":"Ensure the environment where the generated render functions are executed is not in strict mode, or rely on `vue-loader` and Vue's internal runtime which correctly handles this. Direct execution of generated render functions outside of the Vue runtime is generally discouraged for this reason.","message":"The JavaScript code generated by `vue-template-compiler` for render functions uses the `with` statement. This means the compiled render functions cannot be executed in strict mode JavaScript, which is the default for ES Modules and often enforced in modern environments and build setups.","severity":"gotcha","affected_versions":"*"},{"fix":"Only use custom compiler modules and directives if you are building highly specialized tooling and are aware of the implications regarding ecosystem compatibility. Prefer runtime directives/components when possible.","message":"Using custom compiler `modules` or `directives` can lead to incompatibility with standard build tools like `vue-loader`. These custom hooks alter the compilation process, making the templates non-standard and potentially unprocessable by other tools built on the default modules.","severity":"gotcha","affected_versions":"*"},{"fix":"For new projects, use Vue 3 and its associated compilation tools (`@vue/compiler-sfc`, `@vue/compiler-dom`). For existing Vue 2 projects, continue using v2.7.16 but understand that it is no longer actively maintained.","message":"While `vue-template-compiler` v2.7.16 is the final release, the package itself is functionally deprecated for new Vue projects due to the EOL of Vue 2. New development should focus on Vue 3, which uses `@vue/compiler-sfc` and `@vue/compiler-dom`.","severity":"deprecated","affected_versions":">=2.7.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install vue-template-compiler` or `yarn add vue-template-compiler` in your project directory.","cause":"The package has not been installed or is not correctly resolved by your module system.","error":"Cannot find module 'vue-template-compiler'"},{"fix":"Avoid running generated render functions directly in strict mode contexts. This package is intended to be used by build tools and the Vue runtime, which manage the execution context correctly. If you're manually executing, ensure the function context is non-strict.","cause":"The compiled render function, which uses the `with` statement, is being executed in a JavaScript environment that enforces strict mode.","error":"SyntaxError: 'with' statement is not allowed in strict mode"},{"fix":"Verify that `vue-template-compiler` is correctly installed and imported. Ensure that `const compiler = require('vue-template-compiler')` or `import * as compiler from 'vue-template-compiler'` correctly assigns the module exports to the `compiler` variable.","cause":"You are trying to call `compile` on an undefined `compiler` object, likely because the `require()` or `import` failed or returned an unexpected value.","error":"TypeError: Cannot read properties of undefined (reading 'compile')"}],"ecosystem":"npm"}