# vue-template-babel-compiler > Post compiler for Vue template render functions to support ES features with Babel Latest version **2.0.0** (published 2022-07-30) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-template-babel-compiler pnpm add vue-template-babel-compiler yarn add vue-template-babel-compiler bun add vue-template-babel-compiler ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2022-07-30 | | First published | 2021-06-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=14.0.0 | | Dependencies | 12 | | Unpacked size | 13.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 122 | | Author | JuniorTour | | Maintainers | juniortour | | Keywords | vuejs, babel, sfc, vue-template, vue-template-babel | ## Links - npm: https://www.npmjs.com/package/vue-template-babel-compiler - Repository: https://github.com/JuniorTour/vue-template-babel-compiler - Homepage: https://github.com/JuniorTour/vue-template-babel-compiler#readme - Issues: https://github.com/JuniorTour/vue-template-babel-compiler/issues - npm.io page: https://npm.io/package/vue-template-babel-compiler ## Dependencies (12) - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.14.3 - [@babel/types](https://npm.io/package/@babel/types.md) ^7.14.5 - [@babel/plugin-transform-spread](https://npm.io/package/@babel/plugin-transform-spread.md) ^7.14.5 - [@babel/plugin-transform-parameters](https://npm.io/package/@babel/plugin-transform-parameters.md) ^7.14.5 - [@babel/plugin-transform-block-scoping](https://npm.io/package/@babel/plugin-transform-block-scoping.md) ^7.14.5 - [@babel/plugin-transform-destructuring](https://npm.io/package/@babel/plugin-transform-destructuring.md) ^7.14.5 - [@babel/plugin-transform-arrow-functions](https://npm.io/package/@babel/plugin-transform-arrow-functions.md) ^7.14.5 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.14.2 - [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.15.6 - [@babel/plugin-transform-computed-properties](https://npm.io/package/@babel/plugin-transform-computed-properties.md) ^7.14.5 - [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.14.5 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 2.0.0 (latest) — 2022-07-30 - 1.0.9-beta-0 (beta) — 2022-01-09 - 1.0.0-1 (next) — 2021-07-31 - 1.2.0 — 2022-04-21 - 1.1.3 — 2022-02-06 - 1.1.2 — 2022-01-23 - 1.1.1 — 2022-01-18 - 1.1.0 — 2022-01-15 - 1.0.8 — 2021-12-22 - 1.0.7 — 2021-12-02 - 1.0.7-beta.0 — 2021-11-28 - 1.0.6-0 — 2021-10-17 - 1.0.5 — 2021-10-05 - 1.0.4 — 2021-09-14 - 1.0.3 — 2021-09-03 - … 16 more at https://npm.io/package/vue-template-babel-compiler/versions ## README # vue-template-babel-compiler · [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/JuniorTour/vue-template-babel-compiler) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md) Enable `Optional Chaining(?.)`, `Nullish Coalescing(??)` and many new ES syntax for [Vue.js SFC](https://vuejs.org/v2/guide/single-file-components.html) based on [Babel](https://babeljs.io/).

Downloads Size Version LastCommit CIStatus

## DEMO Visit Online Playground → ![DEMO](https://user-images.githubusercontent.com/14243906/127761300-076db45a-cdce-4fda-bd02-1f4fa96de6d8.png) ## Features - All features of [vue-template-compiler](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme) && [vue-template-es2015-compiler](https://github.com/vuejs/vue-template-es2015-compiler) - New ES syntax: `Optional Chaining`, `Bigint`, `Nullish Coalescing` and more - Use babel to transpile vue render function, customization syntax, babel options customization ## Usage ### 1. Install ``` bash npm install vue-template-babel-compiler --save-dev ``` ### 2. Config #### 1. [Vue-CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader) Vue-CLI Online Example Project ``` js // vue.config.js module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { options.compiler = require('vue-template-babel-compiler') return options }) } } ``` #### 2. [Nuxt.js](https://nuxtjs.org/docs/2.x/features/configuration#extend-webpack-to-load-audio-files) Nuxt.js Online Example Project ``` js // nuxt.config.js export default { // Build Configuration: https://go.nuxtjs.dev/config-build build: { loaders: { vue: { compiler: require('vue-template-babel-compiler') } }, }, // ... } ``` ## [Doc](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md) - [vue-jest Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-vue-jest) - [Webpack Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#2-webpack) - [VueUse && `