Vue Template Compiler (Vue 2)

Common errors

• Cannot find module 'vue-template-compiler'

  cause The package has not been installed or is not correctly resolved by your module system.
  fix Run `npm install vue-template-compiler` or `yarn add vue-template-compiler` in your project directory.

• SyntaxError: 'with' statement is not allowed in strict mode

  cause The compiled render function, which uses the `with` statement, is being executed in a JavaScript environment that enforces strict mode.
  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.

• TypeError: Cannot read properties of undefined (reading 'compile')

  cause You are trying to call `compile` on an undefined `compiler` object, likely because the `require()` or `import` failed or returned an unexpected value.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.
• deprecated 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`.
  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.

Install

• npm install vue-template-compiler npm
• yarn add vue-template-compiler yarn
• pnpm add vue-template-compiler pnpm

Imports

• compiler

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

  CommonJS is the primary module system for Vue 2 ecosystem components like this. The `compiler` object contains methods like `compile` and `generateCodeFrame`.
• compile

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

  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.
• compiler (TypeScript/ESM)
  wrong:

  import { compile } from 'vue-template-compiler'

  correct:

  import * as compiler from 'vue-template-compiler'

  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`).

Quickstart

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.

import * as compiler from 'vue-template-compiler';

const template = `
<div id="app">
  <h1>{{ message }}</h1>
  <p v-if="showParagraph">This is a paragraph.</p>
  <button @click="toggleParagraph">Toggle</button>
</div>`;

const compiled = compiler.compile(template, {
  whitespace: 'condense' // Optimize for smaller output
});

if (compiled.errors.length) {
  console.error('Template compilation errors:\n' + compiled.errors.join('\n'));
  process.exit(1);
}

console.log('--- Render Function ---\n' + compiled.render);
console.log('\n--- Static Render Functions ---\n' + compiled.staticRenderFns.join('\n'));

// Example of how the render function would roughly be used at runtime (requires Vue 2)
// const app = new Vue({
//   el: '#app',
//   data: {
//     message: 'Hello, Vue 2!',
//     showParagraph: true
//   },
//   methods: {
//     toggleParagraph() {
//       this.showParagraph = !this.showParagraph;
//     }
//   },
//   render: new Function(compiled.render)() // DANGER: Uses eval-like Function constructor
// });