vue-html

NPM version NPM downloads Build Status

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:

Usage

Edit vue-html-example

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

Vue HTML

An alternative to Vue template and Vue JSX

Vue HTML Info

⭐ Stars188
🔗 Source Codegithub.com
🕒 Last Updatea year ago
🕒 Created6 years ago
🐞 Open Issues1
➗ Star-Issue Ratio188
😎 Authoregoist