{"id":22428324,"url":"https://github.com/momsfriendlydevco/vue-template","last_synced_at":"2025-03-27T06:43:36.510Z","repository":{"id":57127886,"uuid":"274779879","full_name":"MomsFriendlyDevCo/vue-template","owner":"MomsFriendlyDevCo","description":"Compile a simple HTML string via Vue style templates","archived":false,"fork":false,"pushed_at":"2023-10-30T02:42:25.000Z","size":104,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T12:50:56.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/MomsFriendlyDevCo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-24T22:16:38.000Z","updated_at":"2022-08-08T04:07:36.000Z","dependencies_parsed_at":"2024-11-01T18:32:11.675Z","dependency_job_id":"ebf9b776-4f48-4104-a2c9-4a2ba43b4892","html_url":"https://github.com/MomsFriendlyDevCo/vue-template","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"05fd3a6cbef35961d3dae387aac072b0ae397714"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Fvue-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Fvue-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Fvue-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Fvue-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MomsFriendlyDevCo","download_url":"https://codeload.github.com/MomsFriendlyDevCo/vue-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245798538,"owners_count":20673901,"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":[],"created_at":"2024-12-05T20:14:28.057Z","updated_at":"2025-03-27T06:43:36.487Z","avatar_url":"https://github.com/MomsFriendlyDevCo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"@MomsFriendlyDevCo/Vue-Template\n===============================\nCompile a simple HTML string via Vue style templates.\n\nThis package exports a single function to compile a Vue-style template and return a render function which can then be provided with data.\n\n```javascript\nimport vueTemplate from '@momsfriendlydevco/vue-template';\n\nlet template = vueTemplate('\u003cdiv\u003eHello {{name}}\u003c/div\u003e');\n\nawait template({name: 'Joe'}); //~= \"\u003cdiv\u003eHello Joe\u003c/div\u003e\"\nawait template({name: 'Jane'}); //~= \"\u003cdiv\u003eHello Jane\u003c/div\u003e\"\n```\n\n\nAll built in Vue directives are supported:\n\n```javascript\nvar vueTemplate = require('@momsfriendlydevco/vue-template');\n\nvar template = vueTemplate(`\n\t\u003cbody\u003e\n\t\t\u003cp\u003eHello {{user.name.first}} {{user.name.last}}\u003c/p\u003e\n\t\t\u003cp\u003e\n\t\t\tYour favourite color\n\t\t\t\u003cspan v-if=\"user.color.toLowerCase() == 'blue'\"\u003eis blue\u003c/span\u003e\n\t\t\t\u003cspan v-else\u003eis\u003cstrong\u003eNOT\u003c/strong\u003eblue\u003c/span\u003e\n\t\t\u003c/p\u003e\n\t\t\u003cp\u003e\n\t\t\tYour pets are:\n\t\t\t\u003col v-if=\"user.pets \u0026\u0026 user.pets.length\"\u003e\n\t\t\t\t\u003cli v-for=\"pet in user.pets\"\u003e\n\t\t\t\t\t{{pet.name}} ({{pet.type}})\n\t\t\t\t\u003c/li\u003e\n\t\t\t\u003c/ol\u003e\n\t\t\t\u003cspan v-else\u003eYou have no pets (aw!)\u003c/span\u003e\n\t\t\u003c/p\u003e\n\t\u003c/body\u003e\n`);\n\ntemplate({\n\tuser: {\n\t\tname: {first: 'Joe', middle: 'H', last: 'Random'},\n\t\tcolor: 'Red',\n\t\tpets: [\n\t\t\t{name: 'Pepper', type: 'Cat'},\n\t\t\t{name: 'Meg', type: 'Dog'},\n\t\t],\n\t},\n}) //~= Compiled version of the above template\n```\n\n\nSupport table\n-------------\nThe below is a non-exhaustive list of templating functions that are supported.\nIf you find a Vue feature that isn't listed below please file an issue or add a [test](./test) for it.\n\n\n| Feature     | Supported          | Notes        |\n|-------------|--------------------|--------------|\n| `v-if`      | :white_check_mark: |              |\n| `v-on`      | :no_entry_sign:    | `events`     |\n| `v-for`     | :white_check_mark: |              |\n| `v-pre`     | ?                  |              |\n| `v-bind`    | ?                  |              |\n| `v-else`    | :white_check_mark: |              |\n| `v-else-if` | :white_check_mark: |              |\n| `v-html`    | ?                  |              |\n| `v-once`    | :no_entry_sign:    | `events`     |\n| `v-show`    | ?                  |              |\n| `v-slot`    | :no_entry_sign:    | `components` |\n| `v-text`    | ?                  |              |\n| `v-cloak`   | ?                  |              |\n| `v-model`   | ?                  |              |\n| `:class`    | :white_check_mark: | `classes`    |\n| `:style`    | ?                  |              |\n\n\n**Notes:**\n* `classes` - All styles of class binding are supported (e.g. static, lookup, array lookup, objects, mixed)\n* `components` - At this point this module does not support custom components\n* `events` - Events are entirely unsupported as this is a \"one-pass\" templator that returns HTML and does not react to async states\n\n\nAPI\n===\n\nvueTemplate(html)\n-----------------\nCompile raw HTML into a Vue render function and return a template wrapper function. See `template(data)` for documentation on how to use the templator return.\n\n\ntemplate(data)\n--------------\nTakes an object of context data to use when rendering, renders the template and returns the HTML output.\nAll functions are automatically converted into Vue component methods.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmomsfriendlydevco%2Fvue-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmomsfriendlydevco%2Fvue-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmomsfriendlydevco%2Fvue-template/lists"}