Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juniortour/vue-template-babel-compiler
Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://github.com/juniortour/vue-template-babel-compiler
babel sfc vue vue-template vue-template-babel vue2
Last synced: 3 days ago
JSON representation
Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
- Host: GitHub
- URL: https://github.com/juniortour/vue-template-babel-compiler
- Owner: JuniorTour
- Created: 2021-06-20T16:28:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-25T06:45:58.000Z (almost 2 years ago)
- Last Synced: 2025-01-20T11:07:39.566Z (3 days ago)
- Topics: babel, sfc, vue, vue-template, vue-template-babel, vue2
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-template-babel-compiler
- Size: 1.09 MB
- Stars: 120
- Watchers: 5
- Forks: 9
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# vue-template-babel-compiler · [](https://github.com/JuniorTour/vue-template-babel-compiler) [](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md)
Enable `Optional Chaining(?.)`, `Nullish Coalescing(??)` and many new ES syntax for [Vue.js SFC](https://vuejs.org/v2/guide/single-file-components.html) based on [Babel](https://babeljs.io/).
## DEMO
Visit Online Playground →
## Features
- All features of [vue-template-compiler](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme) && [vue-template-es2015-compiler](https://github.com/vuejs/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
``` bash
npm install vue-template-babel-compiler --save-dev
```
### 2. Config
#### 1. [Vue-CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
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](https://nuxtjs.org/docs/2.x/features/configuration#extend-webpack-to-load-audio-files)
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](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md)
- [vue-jest Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-vue-jest)
- [Webpack Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#2-webpack)
- [Vite Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#4-vite-usage)
- [VueUse && `` Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#3-vueuse--script-setup)
- [babel options customization](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-babel-options-customization)
- [Functional Component Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-functional-component-usage)
## [API Doc](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/API.md)
### Welcome for Issues && PR, see [CONTRIBUTING.md](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md) for detail.