vite-plugin-html-inject
Advanced tools
Split your index.html into multiple files and inject them where ever you want!
Split your index.html into smaller, reusable static HTML pieces.
// vite.config.js
import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
export default defineConfig({
plugins: [injectHTML()],
});
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- Loads the specified .html file -->
<load src="src/html/header/branding.html" />
<!-- Loads index.html or index.htm file inside the specified directory -->
<load src="src/html/header" />
<div>
<load src="src/html/body/sidebar.html" />
<load src="src/html/body" />
</div>
<load src="src/html/footer" />
</body>
</html>
The 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.
For example you can reuse a similarly styled link somewhere in your index.html:
<!-- index.html -->
...
<div class="some-cool-menu">
<!-- Load a HTML part -->
<load
src="src/some-static-link.htm"
label="Go to DuckDuckGo"
href="https://duckduckgo.com/"
/>
<load
src="src/some-static-link.htm"
label="Go to Google"
href="https://google.com"
/>
</div>
...
And that src/some-static-link.htm:
<!-- src/some-static-link.htm -->
<a href="{=$href}" class="some-cool-link-style">{=$label}</a>
This will result in a dev and runtime generated index.html looking like
<!-- generated index.html -->
...
<div class="some-cool-menu">
<!-- Load a HTML part -->
<a href="https://duckduckgo.com/" class="some-cool-link-style">
Go to DuckDuckGo
</a>
<a href="https://google.com" class="some-cool-link-style">Go to Google</a>
</div>
...
You are able to customize the loader tag name and the source attribute name.
For example a configuration like:
injectHTML({
tagName: 'loader', // Default is `load`
sourceAttr: 'file', // Default is `src`
});
will replace:
<!-- Load a HTML part -->
<loader
file="src/some-static-link.htm"
label="Go to DuckDuckGo"
href="https://duckduckgo.com/"
/>
By default the debugging option is turned off. However, if you encounter issues loading files, you can turn on path logging.
injectHTML({
debug: {
logPath: true,
},
});
Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.
| via Ko-Fi | Buy me a coffee | via PayPal |
|---|---|---|
 |  |  |
FAQs
Split your index.html into multiple files and inject them where ever you want!
The npm package vite-plugin-html-inject receives a total of 2,740 weekly downloads. As such, vite-plugin-html-inject popularity was classified as popular.
We found that vite-plugin-html-inject demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.
Security News
Node.js v22.12.0 (LTS) debuts with require(esm) enabled by default, alongside security milestones and automated workflows for faster, more stable releases.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.