Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/donnikitos/vite-plugin-html-inject
Split your ViteJS index.html into smaller pieces
https://github.com/donnikitos/vite-plugin-html-inject
front-end front-end-development frontend frontend-web static-site static-site-generator vite vite-plugin vite-plugin-html-inject vitejs
Last synced: 29 days ago
JSON representation
Split your ViteJS index.html into smaller pieces
- Host: GitHub
- URL: https://github.com/donnikitos/vite-plugin-html-inject
- Owner: donnikitos
- License: mit
- Created: 2022-07-17T17:37:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-20T14:47:35.000Z (8 months ago)
- Last Synced: 2024-09-30T02:30:54.593Z (about 1 month ago)
- Topics: front-end, front-end-development, frontend, frontend-web, static-site, static-site-generator, vite, vite-plugin, vite-plugin-html-inject, vitejs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-html-inject
- Size: 110 KB
- Stars: 54
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-html-inject - Split the `index.html` into smaller reusable pieces. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-html-inject - Split the `index.html` into smaller reusable pieces. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-html-inject
[](https://www.npmjs.com/package/vite-plugin-html-inject)  [](https://github.com/donnikitos/vite-plugin-html-inject/blob/master/LICENSE)
 [](https://github.com/donnikitos/vite-plugin-html-inject/issues)
Split your `index.html` into smaller, reusable static HTML pieces.
```js
// 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
```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`:
```html
...
...
```
And that `src/some-static-link.htm`:
```html
{=$label}
```
This will result in a dev and runtime generated index.html looking like
```html
...
...
```
## Customization
You are able to customize the loader tag name and the source attribute name.\
For example a configuration like:
```js
injectHTML({
tagName: 'loader', // Default is `load`
sourceAttr: 'file', // Default is `src`
});
```
will replace:
```html
```
## Debugging
By default the debugging option is turned off. However, if you encounter issues loading files, you can turn on path logging.
```js
injectHTML({
debug: {
logPath: true,
},
});
```
## Support
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 |
| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://ko-fi.com/Y8Y2ALMG) | 
| 
|