vite-plugin-modhtml
Advanced tools
modHTML stands for modular HTML. It is a set of web components and plugins that ease the management of HTML by allowing to decompose an HTML webapp into smaller chunks.
This Vite plugin replaces <modhtml-include src="path"><modhtml-include/> tags with the contents of the HTML file referenced by the src attribute. Note that the src attribute is a path relative to the location of the file where the <modhtml-include> element appears. Referenced files can in turn include other files, recursively. Circular inclusions are detected and generate an error.
First add the plugin to your package.json, in the devDependencies section, e.g. with NPM:
npm install vite-plugin-modhtml --save-dev
Then, add the plugin to your Vite configuration file:
// vite.config.js (or .ts)
import ...
import modhtml from 'vite-plugin-modhtml';
import ...
export default defineConfig({
...
plugins: [
...
modhtml(),
...
],
})
Now you can use the tag in an HTML file.
For instance:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>modHTML Demo</title>
</head>
<body>
<modhtml-include src="hello.html"></modhtml-include>
</body>
</html>
<!-- hello.html -->
<h1>Hello World!</h1>
The
srcattribute can be absolute or relative.
- It is absolute if it begins with a
/. In this case the root is where theindex.htmlsits.- Else, it is relative. In this case it is relative to the including file path at build time.
Avoid putting your included HTML files in the
publicfolder as they would be included in the distribution by Vite. A good practice is to put your included files in a/partialsfolder (and organize them in subfolders if you wish). In this case, in the example above, we would rather have<modhtml-include src="/partials/hello.html"></modhtml-include>
Then after running your vite build script, your dist folder will contain the following file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>modHTML Demo</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
You can also use vite dev to directly see the result. The page will refresh automatically if you change any of the included files.
FAQs
Vite plugin to include HTML partial files
The npm package vite-plugin-modhtml receives a total of 1 weekly downloads. As such, vite-plugin-modhtml popularity was classified as not popular.
We found that vite-plugin-modhtml 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
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.