Vite Plugin Ssinc is a plugin for Vite that allows for Server Side Includes like syntax (with only #include supported) to be used in HTML files.
You can install the plugin using npm:
npm install vite-plugin-ssincor yarn:
yarn add vite-plugin-ssincTo use Vite Plugin Ssinc, add the following to your Vite configuration file.
// vite.config.js
import vitePluginSsinc from 'vite-plugin-ssinc';
export default {
plugins: [
vitePluginSsinc({
includeExtensions: ['shtml', 'html'],
}),
],
};If you want to write it in CommonJS syntax, you can do it like this:
// vite.config.js
const vitePluginSsinc = require('vite-plugin-ssinc').default;
export default {
plugins: [
vitePluginSsinc({
includeExtensions: ['shtml', 'html'],
}),
],
};In your HTML files, you can use SSI directives like so:
<!DOCTYPE html>
<html>
<head>
<title>Vite Plugin Ssinc</title>
</head>
<body>
<!--# include file="header.shtml" -->
<h1>Welcome to Vite Plugin Ssinc</h1>
<!--# include virtual="/footer.shtml" -->
</body>
</html>When Vite serves your site, the SSI directives will be processed and the included files will be included in the HTML response.
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
includeExtensions |
Array<string> |
['shtml'] |
No | An array of file extensions that should be checked for SSI directives. |
apply |
'serve' | 'build' |
None | No | The mode in which the plugin should be applied. By default, the plugin will be applied in both development and production builds. |
Vite Plugin Ssinc is licensed under the MIT License.