https://github.com/egoist/vue-html

An alternative to Vue template and Vue JSX
https://github.com/egoist/vue-html

hyperscript hyperx vue vuejs

Last synced: about 10 hours ago
JSON representation

An alternative to Vue template and Vue JSX

• Host: GitHub
• URL: https://github.com/egoist/vue-html
• Owner: egoist
• License: mit
• Created: 2017-02-13T10:06:19.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-12-25T13:56:19.000Z (almost 3 years ago)
• Last Synced: 2024-10-23T01:37:49.760Z (23 days ago)
• Topics: hyperscript, hyperx, vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 191 KB
• Stars: 185
• Watchers: 7
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-html

[![NPM version](https://img.shields.io/npm/v/vue-html.svg?style=flat-square)](https://npmjs.com/package/vue-html) [![NPM downloads](https://img.shields.io/npm/dm/vue-html.svg?style=flat-square)](https://npmjs.com/package/vue-html) [![Build Status](https://img.shields.io/circleci/project/egoist/vue-html/master.svg?style=flat-square)](https://circleci.com/gh/egoist/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

```bash

$ 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

[![Edit vue-html-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/50qxwm44mx)

```js

import Vue from 'vue'

import HTML from 'vue-html'

Vue.use(HTML)

const Todos = {

  props: ['todos'],

  render(html) {

    return html`

      


        ${

          this.todos.map((todo, index) => {

            return html`

              
${todo}

            `

          })

        }

      

    `

  }

}


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`

      


         (this.todo = e.target.value)}

        />

        Add

        


        <${Todos} todos=${this.todos} />

      

    `

  }

})

```


The usage is very similar to Vue JSX except that the `html` function is powered by [HTM (Hyperscript Tagged Markup)](https://github.com/developit/htm).

### Using Components

```js

const App = {

  render(html) {

    return html`

      


        <${Todos} />

        <${Todos}> or with children />

      

    `

  }

}

```


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

```js

const App = {

  render(html) {

    return html`

      


    `

  },

  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](https://egoist.mit-license.org/) © [EGOIST](https://github.com/egoist)