babel-plugin-transform-vue-template

as you can tell from the name.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-transform-vue-template
0.4.24 years ago5 years agoMinified + gzip package size for babel-plugin-transform-vue-template in KB

Readme

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