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:

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

Contributing

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

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