Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
By Sarah Gooding - Jan 28, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vite-plugin-html-inject
Advanced tools
vite-plugin-html-inject
Split your index.html into multiple files and inject them where ever you want!
vite-plugin-html-inject
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()],
});
Load those sweet separate HTML files
<!-- 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/html/header/branding.html" />
<!-- Loads index.html or index.htm file inside the specified directory -->
<load ="src/html/header" />
<div>
<load ="src/html/body/sidebar.html" />
<load ="src/html/body" />
</div>
<load ="src/html/footer" />
</body>
</html>
Pass down static arguments to injected HTML parts
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/some-static-link.htm"
label="Go to DuckDuckGo"
href="https://duckduckgo.com/"
/>
<load
="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>
...
Debugging
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,
},
});
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 3,915 weekly downloads. As such, vite-plugin-html-inject popularity was classified as popular.
We found that vite-plugin-html-inject demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 12 Sep 2023
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.
Related posts
Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
By Sarah Gooding - Jan 24, 2025
Security News
cURL Project and Go Security Teams Reject CVSS as Broken
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
By Sarah Gooding - Jan 24, 2025