vh

vue-html

An alternative to Vue template and Vue JSX

Showing:

Popularity

Downloads/wk

20

GitHub Stars

188

Maintenance

Last Commit

3yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial