vite-plugin-html-injection
v1.4.2
Published
Vite plugin for injecting html, js, css code snippets into index.html
Downloads
5,667
Maintainers
Readme
Html injection Vite plugin
Vite plugin for injecting html, js, css code snippets into index.html
Purpose
Often, when developing front-end applications, it is necessary to integrate various libraries into the index.html
file - for example, you might want to put there code for Google Analytics, PWA service worker, Open Graph and Twitter Card meta data, Splash screen, Customer support widget and much more.
As a result, index.html
becomes bloated and hard to manage.
This plugin allows you to store code snippets in separate files, keeping index.html
clean and pristine, and inject them at build time. There is no need for special placeholder tags in the index.html
as well.
The plugin also supports Vite dev server HMR
which means you can edit code snippets and see the result immediately in the browser.
Description
There are three types
of code snippets - raw
, js
and css
. raw
snippets are injected as-is, js
and css
ones are wrapped in <script>
and <style>
tags respectfully. Default type
value is raw
.
There are four places you can inject a code snippet to - the beginning and end of the index.html head
tag and the beginning and end of body
Corresponding injectTo
values are: head-prepend
, head
, body-prepend
and body
Installation
pnpm add vite-plugin-html-injection -D
yarn add vite-plugin-html-injection -D
npm i vite-plugin-html-injection -D
Usage
- Add
vite-plugin-html-injection
to your Vite plugins with required configuration:
// vite.config.js
import { defineConfig } from "vite";
import { htmlInjectionPlugin } from "vite-plugin-html-injection";
export default defineConfig({
plugins: [
htmlInjectionPlugin({
// example injections
injections: [
{
// (optional) injection name
name: "Open Graph",
// path to the code snippet file relative to Vite project root
path: "./src/injections/open-graph.html",
// (optional) code snippet type: raw | js | css
type: "raw",
// where to inject: head | body | head-prepend | body-prepend
injectTo: "head",
// (optional) which modes apply to: dev | prod | both
buildModes: "both",
},
{
name: "Google analytics",
path: "./src/injections/ga.html",
type: "raw",
injectTo: "body",
buildModes: "prod",
},
],
}),
],
});
Hint:
You can place config object in a separate json file and import it in the vite.config.js
- Create corresponding code snippets:
<!-- ./src/injections/open-graph.html -->
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.acme.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Acme website" />
<meta property="og:description" content="Welcome to my Acme website" />
<meta property="og:image" content="https://www.acme.com/logo.png" />
<!-- ./src/injections/ga.html -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8W4X32XXXX" />
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-8W4X32XXXX");
</script>
That's it. After running npm serve
or npm build
command the code snippets will be injected.
Signature
The plugin is strongly typed. Here is the signature of its configuration:
export interface IHtmlInjectionConfig {
injections: IHtmlInjectionConfigInjection[];
}
export interface IHtmlInjectionConfigInjection {
name?: string;
path: string;
type?: "raw" | "js" | "css"; // default is 'raw'
injectTo: "head" | "body" | "head-prepend" | "body-prepend";
buildModes?: "dev" | "prod" | "both"; // default is 'both'
}
If you like it, star it
Thank you!
Contributing
You are welcome to make suggestions to (GitHub Issues) of extend functionality of (fork-modify-make PR) this Vite plugin
License
MIT License © 2023-2024