babel-plugin-transform-vue-template
as you can tell from the name.
Last updated 2 years ago by rem .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-transform-vue-template 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.4.2                                ...           latest (2 years ago)

10 Versions

  • 0.4.2                                ...           2 years ago
  • 0.4.1                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 0
Last Month 6
Dependencies (2)
Dev Dependencies (6)

Copyright 2014 - 2016 © taobao.org |