Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 22, 2021 09:11 am GMT

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.

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.jsmodule.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.jsexport 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-loadermodule.exports = {  // ...  module: {    rules: [      {        test: /\.vue$/,        loader: 'vue-loader',        options: {            compiler: require('vue-template-babel-compiler')        }      }    ]  }}

API

Welcome for Issues && PR.


Original Link: https://dev.to/juniortour/use-babel-to-parse-vue-js-sfc-coe

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To