An alternative to Vue template and Vue JSX

vue-html

Use tagged template string in Vue.js render function

Why is this useful?

If you want to use Vue without a bundler / transpiler, this library will (reasonably) make your app smaller:

• Vue (runtime + template compiler): 32kB gzipped
• Vue (runtime + vue-html): 23kB gzipped

What’s the downside? No handy sugars like v-model support.

Install

$ npm install --save vue-html

CDN versions:

• UMD: https://unpkg.com/vue-html/dist/html.js (exposed as window.HTML)
• ESM: https://unpkg.com/vue-html/dist/html.es.js

Usage

import Vue from 'vue'
import HTML from 'vue-html'

Vue.use(HTML)

const Todos = {
  props: ['todos'],
  render(html) {
    return html`
      <ul>
        ${
          this.todos.map((todo, index) => {
            return html`
              <li key=${index}>${todo}</li>
            `
          })
        }
      </ul>
    `
  }
}

new Vue({
  el: '#app',
  data: {
    todos: ['Conquer the world', 'Rewrite Peco'],
    todo: ''
  },
  methods: {
    add() {
      this.todos.push(this.todo)
      this.todo = ''
    }
  },
  render(html) {
    return html`
      <div>
        <input
          value=${this.todo}
          onInput=${e => (this.todo = e.target.value)}
        />
        <button type="button" onClick=${this.add}>Add</button>
        <hr />
        <${Todos} todos=${this.todos} />
      </div>
    `
  }
})

The usage is very similar to Vue JSX except that the html function is powered by HTM (Hyperscript Tagged Markup).

Using Components

const App = {
  render(html) {
    return html`
      <div>
        <${Todos} />
        <${Todos}> or with children <//>
      </div>
    `
  }
}

You can also use the traditional way of using local / global components:

const App = {
  render(html) {
    return html`
      <div><Todos /></div>
    `
  },
  components: {
    Todos
  }
}

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

License

MIT © EGOIST