Vite Plugin Eleventy

Vite plugin to build out your site with Eleventy. Allows you to use the power of 11ty to build your HTML without needing to compile it to disk during development.

Important Integration Caveats

• Due to the nature of integrating Vite with Eleventy, not all Eleventy setups and plugins are guaranteed to work; when in doubt, consider moving to Vite plugins from Eleventy plugins (for instance, instead of using Eleventy transforms, consider writing/using a PostHTML plugin with Vite Plugin PostHTML).
• Because Vite has built-in handling for HTML files, it's recommended to not use .html files with Eleventy. If you're writing Nunjucks, for instance, use .njk instead of .html. Don't rely on Eleventy's default template handling for HTML files is what I'm saying.

Usage

After installing, add it to your Vite config as follows:

const { eleventyPlugin } = require('vite-plugin-eleventy');

module.exports = {
  plugins: [eleventyPlugin()],
};

Config

Use an .eleventy.js configuration file to configure Eleventy.

Additionally, the following options are available for configuration; pass them in as an object when instantiating the plugin:

• replace - Array of arrays representing replacements to be made to a glob'd path to generate an input name for Rollup. Internal arrays are in the form of [find, replace]. Will be passed to string.replace. Defaults to [[viteConfig.root, ''], ['/index.html', '']]

Important Eleventy differences

• This plugin overrides Eleventy's input and output directories with Vite's root directory configuration. If you want to change where files live, you need to change Vite's root. This also means your 11ty template and include directories are relative to the Vite root. This also means you need to not rely on Vite plugins to set your project root. Further testing will determine if this changes in the future.