Vite Plugin HTML Includes

What it Does

This Vite plugin enhances your HTML files by allowing dynamic includes and simple templating features. It supports the following functionalities:
- Replaces tags with the contents of the referenced HTML file.
- Allows passing of variables into included files using locals attribute.
- Supports simple templating with , , , , , , and constructs.

Examples

$3

HTML:
``

`

Output:
`



`

$3

HTML:
`

`

Output:
`



Welcome to the Home Page

Welcome to the About Page

Welcome to the Site

`

$3

HTML:
`

`

Output:
`




Foo really is bar! Revolutionary!

Foo is wow, oh man.

Foo is probably just foo in the end.

`

$3

HTML:
`

`

Output:
`



{{ index }}: {{ item }}



`

Usage

Import viteHTMLIncludes from @kingkongdevs/vite-plugin-html-includes

`
import viteHTMLIncludes from '@kingkongdevs/vite-plugin-html-includes';
`


Add the viteHTMLIncludes to your vite.config.js file's plugins array:
`
plugins: [
viteHTMLIncludes({
componentsDir: '/components/',
}),
]
`

Plugin Options

$3

- #### Type: string
- #### Default: '/components/'`
The directory (relative to the root of your project) where your component files can be found