Use tagged template string in Vue.js render function
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.
$ npm install --save vue-htmlCDN versions:
UMD: https://unpkg.com/vue-html/dist/html.js (exposed aswindow.HTML)ESM: https://unpkg.com/vue-html/dist/html.es.js
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).
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
}
}- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D