Use Babel to parse Vue.js SFC

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 v…


This content originally appeared on DEV Community and was authored by JuniorTour

Github Repo: vue-template-babel-compiler

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

Downloads Version LastCommit

DEMO

DEMO

Features

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')
        }
      }
    ]
  }
}

API

Welcome for Issues && PR.


This content originally appeared on DEV Community and was authored by JuniorTour


Print Share Comment Cite Upload Translate Updates
APA

JuniorTour | Sciencx (2021-08-22T09:11:31+00:00) Use Babel to parse Vue.js SFC. Retrieved from https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/

MLA
" » Use Babel to parse Vue.js SFC." JuniorTour | Sciencx - Sunday August 22, 2021, https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/
HARVARD
JuniorTour | Sciencx Sunday August 22, 2021 » Use Babel to parse Vue.js SFC., viewed ,<https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/>
VANCOUVER
JuniorTour | Sciencx - » Use Babel to parse Vue.js SFC. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/
CHICAGO
" » Use Babel to parse Vue.js SFC." JuniorTour | Sciencx - Accessed . https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/
IEEE
" » Use Babel to parse Vue.js SFC." JuniorTour | Sciencx [Online]. Available: https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/. [Accessed: ]
rf:citation
» Use Babel to parse Vue.js SFC | JuniorTour | Sciencx | https://www.scien.cx/2021/08/22/use-babel-to-parse-vue-js-sfc/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.