babel-plugin-transform-vue-template
Compile Vue template at build time via babel plugin.
Install
yarn add babel-plugin-transform-vue-template --dev yarn add vue-template-compiler --dev# vue-template-compiler is required as peer dependency
Usage
With .babelrc
:
"plugins": "transform-vue-template"
Then every object property template
whose value is a template string literal will be compiled to render
function at build time:
template: `<div> <button @click="whatever">Click me!</button> </div>` methods: { // do whatever }
Compiled code:
{ var _vm = this; var _h = _vm$createElement; var _c = _vm_self_c || _h; return ; } staticRenderFns: methods: {// do whatever } ;
Tagged template expression
This plugin also handles tagged template expression, it simply ignores the tag:
template: html`{{ message }}`
Note that the tag name can only be html
.
Disable transforming for specific code
Add a comment block with @transform-disable
to the previous line:
// @transform-disable template: `<div></div>`
Syntax highlighting
- VSCode, currently no editor support.
- Atom, supported by default.
- Sublime, unknown.
- WebStorm, supported by default.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
babel-plugin-transform-vue-template © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoist.moe · GitHub @egoist · Twitter @_egoistlily