Vue Template Babel Compiler

2.0.0 · maintenance · verified Sun Apr 19

The `vue-template-babel-compiler` package enhances the capabilities of `vue-template-compiler` (for Vue 2 projects) by integrating Babel to allow the use of modern ECMAScript syntax within Vue Single File Component (SFC) templates. This includes features like Optional Chaining (`?.`), Nullish Coalescing (`??`), and BigInt, which are not natively supported by the standard `vue-template-compiler` in older Node.js environments. The current stable version is `2.0.0`, which notably requires Node.js v14 or higher due to how `vue-template-compiler` internally evaluates JavaScript expressions. While not frequently updated, the project is marked as maintained and provides sporadic, but critical, updates. Its key differentiator is providing a seamless way to leverage cutting-edge JavaScript features directly in Vue 2 template expressions, offering customization for Babel options, and plugging into existing Vue CLI and Nuxt.js build configurations.

Common errors

```
SyntaxError: Unexpected token '.'
```
cause Using modern JavaScript syntax (like optional chaining or nullish coalescing) in Vue 2 templates without `vue-template-babel-compiler` configured, or running on an incompatible Node.js version where the `new Function()` check fails.

fix Install `vue-template-babel-compiler` and configure your build tool (Vue CLI, Nuxt.js) to use it as the `vue-loader` compiler option. Ensure your Node.js environment is v14 or higher if using `vue-template-babel-compiler@2.x`.
```
Module not found: Error: Can't resolve 'vue-template-compiler'
```
cause The `vue-template-babel-compiler` lists `vue-template-compiler` as a peer dependency. This error indicates that `vue-template-compiler` is either missing from your project's dependencies or an incompatible version is installed.

fix Install `vue-template-compiler` (e.g., `npm install vue-template-compiler@^2.6.0 --save-dev`) ensuring it meets the peer dependency requirements of `vue-template-babel-compiler`.

Warnings

breaking Version 2.0.0 and above of `vue-template-babel-compiler` explicitly requires Node.js v14 or higher. Running on older Node.js versions will lead to runtime failures due to changes in how `vue-template-compiler` internally evaluates JavaScript expressions.
Fix: Upgrade your Node.js environment to version 14 or higher to be compatible with `vue-template-babel-compiler@2.x`.
gotcha Despite using Babel for transpilation, `vue-template-compiler` internally uses `new Function()` to detect if JavaScript expressions are valid in the current Node.js environment. This means that if your Node.js version itself does not support a modern ES feature (e.g., Optional Chaining before Node.js 14), compilation may still fail with a `SyntaxError` even with `vue-template-babel-compiler` in place.
Fix: Always ensure your Node.js environment meets or exceeds the baseline support for the ES features you intend to use, particularly for `vue-template-babel-compiler@2.x` which requires Node.js v14+.
breaking This compiler is designed *specifically for Vue 2*. Vue 2 reached End of Life (EOL) on December 31, 2023, meaning it no longer receives official updates or security fixes. This compiler is not compatible with Vue 3 projects. Projects still relying on Vue 2 should actively plan for migration to Vue 3.
Fix: For new projects, consider using Vue 3. For existing Vue 2 projects, understand the implications of EOL and plan for a migration to Vue 3 or carefully manage risks associated with using EOL software.
gotcha The `vue-template-babel-compiler` is not a drop-in or automatic enhancement. It requires explicit configuration within your build setup (e.g., `vue.config.js` for Vue CLI, `nuxt.config.js` for Nuxt.js) to override the default `vue-template-compiler` instance used by `vue-loader`.
Fix: Follow the documentation for configuring `vue-loader` in your specific build environment (Vue CLI, Nuxt.js, Webpack) to properly assign `require('vue-template-babel-compiler')` to the `compiler` option.

Install

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

Imports

VueTemplateBabelCompiler
wrong:
```
import { compile } from 'vue-template-babel-compiler'
```
correct:
```
// In vue.config.js or nuxt.config.js:
options.compiler = require('vue-template-babel-compiler')
```
This package is designed to be passed as a compiler option to build tools like `vue-loader` in Vue CLI or Nuxt.js configurations, typically via CommonJS `require()`. It does not expose named exports for direct consumption within application code.

Quickstart

This quickstart demonstrates how to configure `vue-template-babel-compiler` in a Vue CLI project's `vue.config.js` to enable Optional Chaining (`?.`) and Nullish Coalescing (`??`) syntax directly within Vue 2 template expressions, which would otherwise cause a compile error.

{
  // package.json snippet for context
  "name": "my-vue2-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@vue/cli-service": "^4.5.0",
    "vue-template-babel-compiler": "^2.0.0",
    "vue-template-compiler": "^2.6.0",
    "vue": "^2.6.11"
  }
}

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // Configure vue-loader to use vue-template-babel-compiler
        options.compiler = require('vue-template-babel-compiler')
        return options
      })
  }
}

// src/App.vue
<template>
  <div>
    <p>{{ user?.name ?? 'Guest' }}</p>
    <p v-if="data?.items?.length > 0">Items available!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null, // Simulate data that might be null initially
      data: { items: [1, 2] }
    }
  },
  mounted() {
    // Example of delayed data
    setTimeout(() => {
      this.user = { name: 'Alice' };
      this.data = null; // Simulate data becoming null
    }, 2000);
  }
}
</script>

view raw JSON →