babel-plugin-transform-vue-template

    0.4.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i babel-plugin-transform-vue-template

    DownloadsWeekly Downloads

    1,084

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    7.22 kB

    Total Files

    4

    Last publish

    Collaborators

    • egoist
    • rem