{"id":16347735,"url":"https://github.com/privatenumber/htmlvue-loader","last_synced_at":"2025-03-03T16:30:53.570Z","repository":{"id":53127117,"uuid":"150641620","full_name":"privatenumber/htmlvue-loader","owner":"privatenumber","description":"Webpack loader for compiling HTML to Vue","archived":false,"fork":false,"pushed_at":"2021-04-05T17:00:19.000Z","size":399,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T16:01:45.589Z","etag":null,"topics":["html","loader","svg","transformation","vue","webpack","webpack-loader"],"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/privatenumber.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-09-27T20:05:34.000Z","updated_at":"2021-08-27T21:49:16.000Z","dependencies_parsed_at":"2022-08-28T16:11:19.870Z","dependency_job_id":null,"html_url":"https://github.com/privatenumber/htmlvue-loader","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fhtmlvue-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fhtmlvue-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fhtmlvue-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fhtmlvue-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/privatenumber","download_url":"https://codeload.github.com/privatenumber/htmlvue-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241698978,"owners_count":20005299,"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":["html","loader","svg","transformation","vue","webpack","webpack-loader"],"created_at":"2024-10-11T00:45:27.659Z","updated_at":"2025-03-03T16:30:53.251Z","avatar_url":"https://github.com/privatenumber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# htmlvue-loader \u003ca href=\"https://npm.im/htmlvue-loader\"\u003e\u003cimg src=\"https://badgen.net/npm/v/htmlvue-loader\"\u003e\u003c/a\u003e \u003ca href=\"https://npm.im/htmlvue-loader\"\u003e\u003cimg src=\"https://badgen.net/npm/dm/htmlvue-loader\"\u003e\u003c/a\u003e \u003ca href=\"https://packagephobia.now.sh/result?p=htmlvue-loader\"\u003e\u003cimg src=\"https://packagephobia.now.sh/badge?p=htmlvue-loader\"\u003e\u003c/a\u003e\n\nWebpack loader for compiling HTML to Vue\n\n## :raising_hand: Why?\n- 🚰 **Pipes to `vue-loader`** and doesn't depend on `vue-template-compiler`\n- ✍️ **Supports SVG** and any other XML format!\n- ♻️ **Reusability** Preserve HTML/SVG files for reusability\n- ⚙️ **Configurable** Add `v-pre`, `v-once` directives and transformers\n- 🔥 **Fast** Only does the bare minimum\n## :rocket: Quick setup\n\n### Install\n```sh\nnpm i -D htmlvue-loader\n```\n\n### Add to your Webpack config\nInsert `vue-loader` above it to compile it as a Vue component.\n\n```js\n...\n\nmodule: {\n\trules: [\n\t\t...,\n\t\t{\n\t\t\ttest: /\\.(html|svg)$/,\n\t\t\tuse: [\n\t\t\t\t'vue-loader',\n\t\t\t\t'htmlvue-loader'\n\t\t\t]\n\t\t}\n\t]\n}\n\n...\n```\n\n## ⚙️ Options\n- `vPre` `\u003cBoolean\u003e`\n  Adds [`v-pre`](https://vuejs.org/v2/api/#v-pre) to the root element.\n  \u003e Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.\n\n- `vOnce` `\u003cBoolean\u003e`\n  Adds [`v-once`](https://vuejs.org/v2/api/#v-once) to the root element.\n  \u003e Render the element and component **once** only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.\n\n- `transform` `\u003cObject|Function\u003e`\n  A function to transform the html string. If you're using a component in the transformation and you'd like to register it, declare it in `transform.components`.\n  ```js\n  transform: {\n  \ttransformer: svg =\u003e `\u003crand-comp\u003e${svg}\u003c/rand-comp\u003e`,\n  \tcomponents: {\n  \t\tRandComp: './rand-comp.vue'\n  \t}\n  }\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fhtmlvue-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprivatenumber%2Fhtmlvue-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fhtmlvue-loader/lists"}