vue-template-babel-compiler
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 Coalescing
and more - Use babel to transpile vue render function, customization syntax, babel options customization
Usage
1. Install
npm install vue-template-babel-compiler --save-dev
2. 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
API Doc
Welcome for Issues && PR, see CONTRIBUTING.md for detail.
Dependencies
@babel/core: ^7.14.3@babel/plugin-proposal-nullish-coalescing-operator: ^7.14.5@babel/plugin-proposal-object-rest-spread: ^7.15.6@babel/plugin-proposal-optional-chaining: ^7.14.2@babel/plugin-transform-arrow-functions: ^7.14.5@babel/plugin-transform-block-scoping: ^7.14.5@babel/plugin-transform-computed-properties: ^7.14.5@babel/plugin-transform-destructuring: ^7.14.5@babel/plugin-transform-parameters: ^7.14.5@babel/plugin-transform-spread: ^7.14.5@babel/types: ^7.14.5deepmerge: ^4.2.2