Registry / web-framework / vue-template-compiler

vue-template-compiler

library2.7.16jsnpmunverified

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.

web-framework

npm install vue-template-compiler

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TEMPLATE-COMPI

vue-template-compiler

web-frameworkjavascriptv2.7.16

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

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)

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

✗ import { compile } 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`).

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 // });

Debug

Known issues

breakingVue 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.

affects: >=2.7.16

gotchaThe 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.

affects: *

gotchaUsing 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.

affects: *

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

affects: >=2.7.0

Errors

Common errors & fixes

Cannot find module 'vue-template-compiler'

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

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')

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.

Upgrade

Version history

2.7.16latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuejs/vue ↗

packagehttps://www.npmjs.com/package/vue-template-compiler ↗

homepagehttps://vuejs.org ↗