{"id":13417379,"url":"https://github.com/donnikitos/vite-plugin-html-inject","last_synced_at":"2025-10-25T07:30:35.553Z","repository":{"id":57711905,"uuid":"514912830","full_name":"donnikitos/vite-plugin-html-inject","owner":"donnikitos","description":"Split your ViteJS index.html into smaller pieces","archived":false,"fork":false,"pushed_at":"2024-03-20T14:47:35.000Z","size":113,"stargazers_count":64,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T06:11:22.470Z","etag":null,"topics":["front-end","front-end-development","frontend","frontend-web","static-site","static-site-generator","vite","vite-plugin","vite-plugin-html-inject","vitejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-html-inject","language":"TypeScript","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/donnikitos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["donnikitos"],"patreon":null,"open_collective":null,"ko_fi":"donnikitos","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"donnikitos","custom":["https://www.paypal.com/donate/?hosted_button_id=EPXZPRTR7JHDW"]}},"created_at":"2022-07-17T17:37:34.000Z","updated_at":"2025-01-29T11:39:58.000Z","dependencies_parsed_at":"2023-10-14T18:34:28.623Z","dependency_job_id":"8947fe8c-24e4-4e23-bcad-f172a7cbd150","html_url":"https://github.com/donnikitos/vite-plugin-html-inject","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"2a6a875c41e06b4df5c197dfe5013f228bbfa6ef"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donnikitos%2Fvite-plugin-html-inject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donnikitos%2Fvite-plugin-html-inject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donnikitos%2Fvite-plugin-html-inject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donnikitos%2Fvite-plugin-html-inject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donnikitos","download_url":"https://codeload.github.com/donnikitos/vite-plugin-html-inject/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238096216,"owners_count":19415757,"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":["front-end","front-end-development","frontend","frontend-web","static-site","static-site-generator","vite","vite-plugin","vite-plugin-html-inject","vitejs"],"created_at":"2024-07-30T22:00:36.089Z","updated_at":"2025-10-25T07:30:35.218Z","avatar_url":"https://github.com/donnikitos.png","language":"TypeScript","funding_links":["https://github.com/sponsors/donnikitos","https://ko-fi.com/donnikitos","https://buymeacoffee.com/donnikitos","https://www.paypal.com/donate/?hosted_button_id=EPXZPRTR7JHDW","https://ko-fi.com/Y8Y2ALMG","https://www.buymeacoffee.com/donnikitos"],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-html-inject\n\n[![npm](https://img.shields.io/npm/dt/vite-plugin-html-inject?style=for-the-badge)](https://www.npmjs.com/package/vite-plugin-html-inject) ![GitHub Repo stars](https://img.shields.io/github/stars/donnikitos/vite-plugin-html-inject?label=GitHub%20Stars\u0026style=for-the-badge) [![GitHub](https://img.shields.io/github/license/donnikitos/vite-plugin-html-inject?color=blue\u0026style=for-the-badge)](https://github.com/donnikitos/vite-plugin-html-inject/blob/master/LICENSE)\n![GitHub last commit](https://img.shields.io/github/last-commit/donnikitos/vite-plugin-html-inject?style=for-the-badge) [![Issues](https://img.shields.io/github/issues/donnikitos/vite-plugin-html-inject?style=for-the-badge)](https://github.com/donnikitos/vite-plugin-html-inject/issues)\n\nSplit your `index.html` into smaller, reusable static HTML pieces.\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport injectHTML from 'vite-plugin-html-inject';\n\nexport default defineConfig({\n\tplugins: [injectHTML()],\n});\n```\n\n## Load those sweet separate HTML files\n\n```html\n\u003c!-- index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"UTF-8\" /\u003e\n\t\t\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n\t\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003c!-- Loads the specified .html file --\u003e\n\t\t\u003cload src=\"src/html/header/branding.html\" /\u003e\n\t\t\u003c!-- Loads index.html or index.htm file inside the specified directory --\u003e\n\t\t\u003cload src=\"src/html/header\" /\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003cload src=\"src/html/body/sidebar.html\" /\u003e\n\t\t\t\u003cload src=\"src/html/body\" /\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cload src=\"src/html/footer\" /\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Pass down static arguments to injected HTML parts\n\nThe plugin also allows you to supply your HTML parts with some basic arguments, so you can reuse the same piece of code in multiple places.\n\nFor example you can reuse a similarly styled link somewhere in your `index.html`:\n\n```html\n\u003c!-- index.html --\u003e\n...\n\u003cdiv class=\"some-cool-menu\"\u003e\n\t\u003c!-- Load a HTML part --\u003e\n\t\u003cload\n\t\tsrc=\"src/some-static-link.htm\"\n\t\tlabel=\"Go to DuckDuckGo\"\n\t\thref=\"https://duckduckgo.com/\"\n\t/\u003e\n\t\u003cload\n\t\tsrc=\"src/some-static-link.htm\"\n\t\tlabel=\"Go to Google\"\n\t\thref=\"https://google.com\"\n\t/\u003e\n\u003c/div\u003e\n...\n```\n\nAnd that `src/some-static-link.htm`:\n\n```html\n\u003c!-- src/some-static-link.htm --\u003e\n\u003ca href=\"{=$href}\" class=\"some-cool-link-style\"\u003e{=$label}\u003c/a\u003e\n```\n\nThis will result in a dev and runtime generated index.html looking like\n\n```html\n\u003c!-- generated index.html --\u003e\n...\n\u003cdiv class=\"some-cool-menu\"\u003e\n\t\u003c!-- Load a HTML part --\u003e\n\t\u003ca href=\"https://duckduckgo.com/\" class=\"some-cool-link-style\"\u003e\n\t\tGo to DuckDuckGo\n\t\u003c/a\u003e\n\t\u003ca href=\"https://google.com\" class=\"some-cool-link-style\"\u003eGo to Google\u003c/a\u003e\n\u003c/div\u003e\n...\n```\n\n## Customization\n\nYou are able to customize the loader tag name and the source attribute name.\\\nFor example a configuration like:\n\n```js\ninjectHTML({\n\ttagName: 'loader', // Default is `load`\n\tsourceAttr: 'file', // Default is `src`\n});\n```\n\nwill replace:\n\n```html\n\u003c!-- Load a HTML part --\u003e\n\u003cloader\n\tfile=\"src/some-static-link.htm\"\n\tlabel=\"Go to DuckDuckGo\"\n\thref=\"https://duckduckgo.com/\"\n/\u003e\n```\n\n## Debugging\n\nBy default the debugging option is turned off. However, if you encounter issues loading files, you can turn on path logging.\n\n```js\ninjectHTML({\n\tdebug: {\n\t\tlogPath: true,\n\t},\n});\n```\n\n## Support\n\nLove open source? Enjoying my project?\\\nYour support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.\n\n| via Ko-Fi                                                                         | Buy me a coffee                                                                                                                                                 | via PayPal                                                                                                                                                             |\n| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Y8Y2ALMG) | \u003ca href=\"https://www.buymeacoffee.com/donnikitos\" target=\"_blank\"\u003e\u003cimg src=\"https://nititech.de/donate-buymeacoffee.png\" alt=\"Buy Me A Coffee\" width=\"174\"\u003e\u003c/a\u003e | \u003ca href=\"https://www.paypal.com/donate/?hosted_button_id=EPXZPRTR7JHDW\" target=\"_blank\"\u003e\u003cimg src=\"https://nititech.de/donate-paypal.png\" alt=\"PayPal\" width=\"174\"\u003e\u003c/a\u003e |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonnikitos%2Fvite-plugin-html-inject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonnikitos%2Fvite-plugin-html-inject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonnikitos%2Fvite-plugin-html-inject/lists"}