vue-template-babel-compiler · 
Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel.
DEMO
Visit Online Playground →
Features
- All features of vue-template-compiler && vue-template-es2015-compiler
- New ES syntax:
Optional Chaining,Bigint,Nullish Coalescingand more - Use babel to transpile vue render function, customization syntax, babel options customization
Usage
1. Install
npm install vue-template-babel-compiler --save-dev2. Config
1. Vue-CLI
Vue-CLI Online Example Project// 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
Nuxt.js Online Example Project// nuxt.config.js
export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
loaders: {
vue: {
compiler: require('vue-template-babel-compiler')
}
},
},
// ...
}Doc
- vue-jest Usage
- Webpack Usage
- VueUse &&
<script setup>Usage - babel options customization
- Functional Component Usage