wojtekmaj/vite-plugin-simple-html

How to inject HTML into the template?

Closed this issue · 1 comments

AndreiBadescu commented

From the docs I don't understand how to template my html.
Let's say I have a footer.html which I want to integrate in every html file from my project at the bottom of the body. How could I do this using this plugin?

wojtekmaj commented

Add EJS variable in your template.

<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body>
+   <%= footer %>
  </body>
</html>

In Vite config file, load HTML contents from anywhere, in your case, from your filesystem.

import fs from 'node:fs';

const footer = fs.readFileSync('/path/to/footer.html', 'utf-8');

In Vite config file, in vite-plugin-simple-html config, inject the HTML contents into EJS variable.

  plugins: [
    simpleHtmlPlugin({
      minify: isProduction ? minifyOptions : false,
      inject: {
        data: {
          footer,
        },
      },
    }),
  ]