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
- Please star Eleventy on GitHub!
- Follow us on Mastodon @eleventy@fosstodon.org or Twitter @eleven_ty
- Join us on Discord
- Support 11ty on Open Collective
- 11ty on npm
- 11ty on GitHub
npm install @11ty/eleventy-plugin-vite@alpha --save-dev
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
export default function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyVitePlugin);
}
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.
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"),
},
},
},
});
}
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)