{"id":15631617,"url":"https://github.com/egoist/vue-html","last_synced_at":"2025-08-21T16:26:23.782Z","repository":{"id":45275482,"uuid":"81811000","full_name":"egoist/vue-html","owner":"egoist","description":"An alternative to Vue template and Vue JSX","archived":false,"fork":false,"pushed_at":"2021-12-25T13:56:19.000Z","size":196,"stargazers_count":185,"open_issues_count":1,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T20:04:30.247Z","etag":null,"topics":["hyperscript","hyperx","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/egoist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-13T10:06:19.000Z","updated_at":"2024-05-20T11:09:52.000Z","dependencies_parsed_at":"2022-09-21T09:21:43.841Z","dependency_job_id":null,"html_url":"https://github.com/egoist/vue-html","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/vue-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253352168,"owners_count":21895103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hyperscript","hyperx","vue","vuejs"],"created_at":"2024-10-03T10:41:00.662Z","updated_at":"2025-06-17T05:02:36.473Z","avatar_url":"https://github.com/egoist.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-html\n\n[![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)\n\n\u003e Use tagged template string in Vue.js render function\n\n## Why is this useful?\n\nIf you want to use Vue without a bundler / transpiler, this library will (reasonably) make your app smaller:\n\n- Vue (runtime + template compiler): 32kB gzipped\n- Vue (runtime + vue-html): 23kB gzipped\n\n**What's the downside?** No handy sugars like `v-model` support.\n\n## Install\n\n```bash\n$ npm install --save vue-html\n```\n\nCDN versions:\n\n- `UMD`: https://unpkg.com/vue-html/dist/html.js (exposed as `window.HTML`)\n- `ESM`: https://unpkg.com/vue-html/dist/html.es.js\n\n## Usage\n\n[![Edit vue-html-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/50qxwm44mx)\n\n```js\nimport Vue from 'vue'\nimport HTML from 'vue-html'\n\nVue.use(HTML)\n\nconst Todos = {\n  props: ['todos'],\n  render(html) {\n    return html`\n      \u003cul\u003e\n        ${\n          this.todos.map((todo, index) =\u003e {\n            return html`\n              \u003cli key=${index}\u003e${todo}\u003c/li\u003e\n            `\n          })\n        }\n      \u003c/ul\u003e\n    `\n  }\n}\n\nnew Vue({\n  el: '#app',\n  data: {\n    todos: ['Conquer the world', 'Rewrite Peco'],\n    todo: ''\n  },\n  methods: {\n    add() {\n      this.todos.push(this.todo)\n      this.todo = ''\n    }\n  },\n  render(html) {\n    return html`\n      \u003cdiv\u003e\n        \u003cinput\n          value=${this.todo}\n          onInput=${e =\u003e (this.todo = e.target.value)}\n        /\u003e\n        \u003cbutton type=\"button\" onClick=${this.add}\u003eAdd\u003c/button\u003e\n        \u003chr /\u003e\n        \u003c${Todos} todos=${this.todos} /\u003e\n      \u003c/div\u003e\n    `\n  }\n})\n```\n\nThe usage is very similar to Vue JSX except that the `html` function is powered by [HTM (Hyperscript Tagged Markup)](https://github.com/developit/htm).\n\n### Using Components\n\n```js\nconst App = {\n  render(html) {\n    return html`\n      \u003cdiv\u003e\n        \u003c${Todos} /\u003e\n        \u003c${Todos}\u003e or with children \u003c//\u003e\n      \u003c/div\u003e\n    `\n  }\n}\n```\n\nYou can also use the traditional way of using local / global components:\n\n```js\nconst App = {\n  render(html) {\n    return html`\n      \u003cdiv\u003e\u003cTodos /\u003e\u003c/div\u003e\n    `\n  },\n  components: {\n    Todos\n  }\n}\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## License\n\n[MIT](https://egoist.mit-license.org/) © [EGOIST](https://github.com/egoist)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fvue-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-html/lists"}