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 @eleventy@fosstodon.org 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)