Coder Social home page Coder Social logo

safrazik / babel-plugin-transform-vue-template Goto Github PK

View Code? Open in Web Editor NEW

This project forked from egoist/babel-plugin-transform-vue-template

0.0 1.0 0.0 45 KB

Babel plugin to transform Vue template.

License: MIT License

JavaScript 99.43% HTML 0.57%

babel-plugin-transform-vue-template's Introduction

babel-plugin-transform-vue-template

NPM version NPM downloads CircleCI donate

An alternative way to use Vue template and compile it at build time. So these two are equivalent:

preview

We didn't use <template> directly because we want to create a higher order component here.

Install

yarn add vue-template-compiler babel-plugin-transform-vue-template --dev
# vue-template-compiler is required as peer dependency

Usage

With .babelrc:

{
  "plugins": ["transform-vue-template"]
}

Then you can write template in your render function:

import pokemon from 'pokemon'

export default {
  render() {
    return `<div>
      <h1>Hello,  I'm a random pokemon: ${pokemon.random()}</h1>
      <button @click="whatever">Click me!</button>
    </div>`
  },
  methods: {
    whatever() {
      // do whatever
    }
  }
}

Note that ${foo} works like {{ foo }} here.

You can also write template in the template property:

export default {
  template: `<div>${new Date()}</div>`
}

Note that we only transform it into render function when the value is a template literal.

Template Require

You can write your template in an external html file and require it from js file

<!-- my-template.html -->
<div>My Awesome Template</div>
// my-component.js
export default {
  render(){
    return require('./my-template.html')
  }
}
// OR
export default {
  template: require('./my-template.html')
}

Disable transforming for specific code

Add a comment block with @transform-disable to the previous line:

export default {
  // @transform-disable
  template: `<div></div>`
}

API

options

template

Type: boolean
Default: true

Transform object property template.

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).

egoistian.com · GitHub @egoist · Twitter @_egoistlily

babel-plugin-transform-vue-template's People

Contributors

egoist avatar safrazik avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.