Vite Jump to heading #

• eleventy-plugin-vite on GitHub

A plugin to use Vite with Eleventy 2.0+.

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

Related Jump to heading #

• 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)

Installation Jump to heading #

npm install @11ty/eleventy-plugin-vite

const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyVitePlugin);
};

Options Jump to heading #

View the full list of Vite Configuration options.

const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite");

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

    // Defaults are shown:
    viteOptions: {
      clearScreen: false,
      server: {
        mode: "development",
        middlewareMode: true,
      },
      build: {
        mode: "production",
      }
    }
  });
};

Other pages in Watch and Serve:

• Eleventy Dev Server
• Browsersync
• Vite