Skip to content
Babel plugin to compile Vue template at build time.
Branch: master
Clone or download
Latest commit 4d01cd7 Jun 4, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
example refactor May 10, 2018
.editorconfig init Jun 30, 2017
.gitattributes init Jun 30, 2017
.gitignore init Jun 30, 2017
LICENSE update readme Jun 3, 2018
circle.yml init Jun 30, 2017
index.js support TaggedTemplateExpression Jun 3, 2018
yarn.lock clean up May 11, 2018


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

You can’t perform that action at this time.