Use Babel to parse Vue.js SFC

JuniorTour — Sun, 22 Aug 2021 09:11:31 +0000

Github Repo: vue-template-babel-compiler

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

DEMO

Features

All features of vue-template-compiler && vue-template-es2015-compiler
new ES syntax: Optional Chaining, Bigint, Nullish Coalescing and more
Customization syntax, babel plugin...

Usage

1. Install

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

2. Config

1. Vue-CLI

DEMO project for Vue-CLI

// 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

DEMO project for Nuxt.js

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

3. Webpack

// your webpack.config.js where config vue-loader
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            compiler: require('vue-template-babel-compiler')
        }
      }
    ]
  }
}

DEV Community: JuniorTour

Use Babel to parse Vue.js SFC

Github Repo: vue-template-babel-compiler

DEMO

Features

Usage

1. Install

2. Config

1. Vue-CLI

2. Nuxt.js

3. Webpack

API

Welcome for Issues && PR.