vue-template-babel-compiler ·  

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel.

src="https://img.shields.io/npm/dt/vue-template-babel-compiler"
alt="Downloads">


src="https://img.shields.io/github/size/JuniorTour/vue-template-babel-compiler/lib/index.js"
alt="Size">


src="https://img.shields.io/npm/v/vue-template-babel-compiler.svg?sanitize=true"
alt="Version">


src="https://img.shields.io/github/last-commit/JuniorTour/vue-template-babel-compiler?sanitize=true"
alt="LastCommit">


src="https://github.com/JuniorTour/vue-template-babel-compiler/actions/workflows/main.yml/badge.svg"
alt="CIStatus">

DEMO

Visit Online Playground →

!DEMO

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

$3

`` bash
npm install vue-template-babel-compiler --save-dev
`

$3

#### 1. Vue-CLI

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


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


- vue-jest Usage
- Webpack Usage
- VueUse &&