templatesrolluprollupjsvite

How to include HTML partials using Vite?

Is it possible to include snippets of shared HTML using Vite (vanilla)? I'm looking for a way to have the HTML prerendered without injecting via JS.

Something like:

<html>
  <head>
    { include 'meta-tags' }
  </head>
  <body> 
    { include 'nav' }
    <h1>Hello World</h1>
  <body>
</html>
Solution

  • vite-plugin-handlebars was the solution I was looking for. Partials were super easy to set up with this package:

    Setup:

    // vite.config.js
import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, 'partials'),
    }),
  ],
};

    File where you want to include partial:

    <!-- index.html -->
{{> header }}

<h1>The Main Page</h1>

    Rendered output:

    <header><a href="/">My Website</a></header>

<h1>The Main Page</h1>