Registry / web-framework / vue-template-babel-compiler

vue-template-babel-compiler

library2.0.0jsnpmunverified

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.

web-framework

npm install vue-template-babel-compiler

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TEMPLATE-BABEL

vue-template-babel-compiler

web-frameworkjavascriptv2.0.0

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.

VueTemplateBabelCompiler

✓ // In vue.config.js or nuxt.config.js: options.compiler = require('vue-template-babel-compiler')

✗ import { compile } from '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.

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>

Debug

Known issues

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

affects: >=2.0.0

gotchaDespite 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+.

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

SyntaxError: Unexpected token '.'

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'

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

vue-template-compilerrequiredThis package acts as a post-compiler for `vue-template-compiler`, extending its capabilities. It's a peer dependency.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/JuniorTour/vue-template-babel-compiler ↗

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