eleventy-plugin-vite 🕚⚡️🎈🐀

A plugin to use Vite v5 with Eleventy v3.

This plugin:

• Runs Vite as Middleware in Eleventy Dev Server (try with Eleventy’s --incremental)
• Runs Vite build to postprocess your Eleventy build output

Eleventy Housekeeping

• Please star Eleventy on GitHub!
• Follow us on Mastodon @[email protected] or Twitter @eleven_ty
• Join us on Discord
• Support 11ty on Open Collective
• 11ty on npm
• 11ty on GitHub

Installation

npm install @11ty/eleventy-plugin-vite@alpha --save-dev

ESM .eleventy.js Config

import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(EleventyVitePlugin);
}

CommonJS .eleventy.js Config

Note

This plugin is written in ESM, therefore require is not possible. If your .eleventy.js config uses CommonJS, make it async and create a dynamic import as shown below.

module.exports = async function (eleventyConfig) {
	const EleventyPluginVite = (await import("@11ty/eleventy-plugin-vite")).default;

	eleventyConfig.addPlugin(EleventyPluginVite);
};

Read more about ESM vs CommonJS on the Eleventy documentation.

Options

View the full list of Vite Configuration options.

import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(EleventyVitePlugin, {
		tempFolderName: ".11ty-vite", // Default name of the temp folder

		// Options passed to the Eleventy Dev Server
		// Defaults
		serverOptions: {
			module: "@11ty/eleventy-dev-server",
			domDiff: false,
		},

		// Defaults
		viteOptions: {
			clearScreen: false,
			appType: "mpa",

			server: {
				middlewareMode: true,
			},

			build: {
				emptyOutDir: true,
			},

			resolve: {
				alias: {
					// Allow references to `node_modules` folder directly
					"/node_modules": path.resolve(".", "node_modules"),
				},
			},
		},
	});
}

Related Projects

• eleventy-plus-vite by @matthiasott: A starter template using this plugin
• Currently unmaintained:
  • slinkity by @Holben888: A much deeper and more comprehensive integration with Vite! Offers partial hydration and can use shortcodes to render framework components in Eleventy!
  • vite-plugin-eleventy by @Snugug: Uses Eleventy as Middleware in Vite (instead of the post-processing approach used here)