Vue Template ES2015 Compiler

Common errors

• Object.assign is not a function

  cause Attempting to use object rest/spread syntax in Vue 2 templates (transpiled by this compiler) in an environment (e.g., IE) that lacks native `Object.assign` support without a polyfill.
  fix Include a polyfill for `Object.assign` in your project's build process or runtime environment to support older browsers. Modern build setups often include `core-js` for this.

• Unknown custom element: <YourComponent> - did you register the component correctly?

  cause Using `vue-template-es2015-compiler` in a Vue 3 project, or misconfiguring Vue 2 components when relying on an outdated build chain. This compiler is Vue 2 specific.
  fix Ensure you are using the correct compiler for your Vue version. For Vue 3, this compiler is not used; `@vue/compiler-sfc` and `@vue/compiler-dom` are the standard. If in Vue 2, verify `vue-loader` and `vue-template-compiler` versions are compatible.

Warnings

• deprecated This package is exclusively for Vue 2 projects. It is superseded by `@vue/compiler-sfc` and `@vue/compiler-dom` in Vue 3 and should not be used in Vue 3 applications.
  Fix: For Vue 3 projects, use `@vue/compiler-sfc` or `@vue/cli-service` which integrates the correct compilers. If migrating from Vue 2, consult the Vue 3 migration guide.
• breaking Since version 1.8.0, object rest spread usage within templates is transpiled to `Object.assign` calls. This requires a polyfill for `Object.assign` in older browsers, such as Internet Explorer, to prevent runtime errors.
  Fix: Ensure `Object.assign` is polyfilled for target browsers, especially IE. Modern Vue CLI setups typically handle this automatically.
• gotcha This is an internal package primarily used by build tools like `vue-loader` and `vueify`. Direct programmatic usage by end-user applications is rare and generally not recommended, as its API is subject to change without public deprecation cycles.
  Fix: Rely on Vue CLI or `vue-loader` to integrate this compiler during the build process, rather than attempting direct usage in application code.
• gotcha The package has not been updated since February 2019 (version 1.9.1). This indicates a lack of ongoing maintenance, which may lead to compatibility issues with newer JavaScript features, tooling, or environments not present at the time of its last release.
  Fix: If encountering issues with modern tooling or language features, consider if your project can upgrade to Vue 3 where compilation is handled by actively maintained packages.

Install

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

Imports

• compile
  wrong:

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

  correct:

  import compile from 'vue-template-es2015-compiler'

  This package typically exposes a default export for its primary compilation function. Direct import by end-users is uncommon as it's an internal tool.
• processRenderFunction

  const processRenderFunction = require('vue-template-es2015-compiler');

  CommonJS `require` for its main function, likely named 'processRenderFunction' or similar in internal contexts. The package's `main` entry is `index.js`.

Quickstart

Demonstrates programmatic usage of the compiler to process a raw Vue render function string, transpiling ES2015+ features and removing `with` blocks.

const compile = require('vue-template-es2015-compiler');

// Simulate a render function string from vue-template-compiler output
const rawRenderFn = `
  with(this){
    return _c('div', [
      _v('Hello ' + (name)),
      _c('button', { on: { click: () => ({ ...user, active: true }) } }, ['Click'])
    ])
  }
`;

// Options can be passed, though typically defaults are used by vue-loader
const options = {};

try {
  const compiledResult = compile(rawRenderFn, options);
  console.log('Processed Render Function:\n', compiledResult);
  // Expected output will have 'with' removed and ES2015+ features transpiled
  // e.g., fat arrow functions, object spread to Object.assign
} catch (error) {
  console.error('Compilation Error:', error);
}