eleventy-plugin-vite 🕚⚡️🎈🐀

A plugin to use Vite with Eleventy.

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

These are the default options of the plugin. There's no need to specify them unless you want to change them.

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

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

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

        // Vite Config
        viteOptions: {
            clearScreen: false,
            appType: "mpa",
            server: {
                middlewareMode: true,
            },
            build: {
                emptyOutDir: true,
                rolldownOptions: {
                    input: {
                        // HTML entry points will be injected automatically
                        // Custom input will be merged
                    },
                },
            },
            resolve: {
                alias: {
                    // Allow references to `node_modules` directly for bundling.
                    "/node_modules": path.resolve(".", "node_modules"),
                    // Note that bare module specifiers are also supported
                },
            },
        },
    });
}

View the full list of Vite configuration options. Custom viteOptions will be deeply merged with the defaults.

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)