egoist / vue-html

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

vue-html's Issues

Doesn't play well with vue-router

I'm trying this out with vue-router and <router-link to="/">Home</router-link> nor <router-view></router-view> won't render anything.

Is this a know issue / limitation?

Render string with space separated attribute content

Hello, I'm trying to test your library with a very basic code:
const test = '<p class="a b">Just a test</p>'

However I get an error and the rendered HTML is:

<p a="a" b"="b"" class="class">Just a test</p>

Am I doing something wrong?

This is the error I'm getting:

[nuxt] Error while initializing app DOMException: Failed to execute 'setAttribute' on 'Element': 'b"' is not a valid attribute name.

I would like to add a component, however, for now, it is just a test. The complete test should be:
const test = '<p class="a b">Just a test <my-component component-data="data"> </my-component> </p>'

Template string with component

Hello,

I have render html with your plugin then it works fine with normal html but I have create one component for ex. Breadcrumb and render html with component but it not working. Please help me if it is possible.

=> For more help please review my code

<script>
import Breadcrumb from '~components/Breadcrumb'
import Vue from 'vue'
import HTML from 'vue-html'

Vue.use(HTML)

export default {
  data () {
    return {
      html: '<div><Breadcrumb/></div>'
    }
  },
  render (h) {
    return this.$html(this.html)
  },
  components: {
    Breadcrumb
  }
}
</script>