as you can tell from the name.

Downloads in past


0.4.26 years ago6 years agoMinified + gzip package size for babel-plugin-transform-vue-template in KB


NPM version NPM downloads CircleCI donate
Compile Vue template at build time via babel plugin.


yarn add babel-plugin-transform-vue-template --dev

yarn add vue-template-compiler --dev
# vue-template-compiler is required as peer dependency


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:
export default {
  template: `<div>
    <button @click="whatever">Click me!</button>

  methods: {
    whatever() {
      // do whatever

Compiled code:
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', [_c('button', {
      on: {
        "click": _vm.whatever
    }, [_vm._v("Click me!")])]);
  staticRenderFns: [],
  methods: {
    whatever() {// do whatever


Tagged template expression

This plugin also handles tagged template expression, it simply ignores the tag:
export default {
  template: html`<div>{{ message }}</div>`

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:
export default {
  // @transform-disable
  template: `<div></div>`

Syntax highlighting

  • VSCode, currently no editor support.
  • Atom, supported by default.
  • Sublime, unknown.
  • WebStorm, supported by default.


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


babel-plugin-transform-vue-template © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list). · GitHub @egoist · Twitter @egoistlily