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

README.md

babel-plugin-transform-vue-template

NPM version NPM downloads CircleCI 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: `<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

You can’t perform that action at this time.