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

1npm install vue-template-babel-compiler --save-dev

2. Config

1. Vue-CLI

Vue-CLI Online Example Project

1// vue.config.js
2module.exports = {
3  chainWebpack: config => {
4    config.module
5      .rule('vue')
6      .use('vue-loader')
7      .tap(options => {
8        options.compiler = require('vue-template-babel-compiler')
9        return options
10      })
11  }
12}

2. Nuxt.js

Nuxt.js Online Example Project

1// nuxt.config.js
2export default {
3  // Build Configuration: https://go.nuxtjs.dev/config-build
4  build: {
5    loaders: {
6      vue: {
7        compiler: require('vue-template-babel-compiler')
8      }
9    },
10  },
11  // ...
12}

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.