Babel Plugin Transform Vue Template

babel-plugin-transform-vue-template

[](https://npmjs.com/package/babel-plugin-transform-vue-template) [](https://npmjs.com/package/babel-plugin-transform-vue-template) [](https://circleci.com/gh/egoist/babel-plugin-transform-vue-template/tree/master) [](https://github.com/egoist/donate)

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: `

    Click me!
  
`,

  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`
{{ 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: