Skip to navigation Skip to main content
These docs are for an upcoming version of Build Awesome and are subject to change—take extra care before linking here as URLs may change! Look to the latest stable docs instead (or the full release history).
Blog
Back Build Awesome Pro and make it easier to build for the web!
Versions
Stable
3.1.6
Canary
4.0.0-alpha.10

Vite Favicon for v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fvite.dev%2F

On this page

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
Play Video: Eleventy Vite Plugin (Weekly №5) Eleventy Vite Plugin (Weekly №5) ▶1m36s
  • 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

npm install @11ty/eleventy-plugin-vite
eleventy.config.js
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";

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

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

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(EleventyVitePlugin);
};
Expand for full list of options

View the full list of Vite Configuration options.

eleventy.config.js
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
    // e.g. domdiff, enabled, etc.

    // Added in Vite plugin v2.0.0
    serverOptions: {},

    // Defaults are shown:
    viteOptions: {
      clearScreen: false,
      appType: "mpa", // New in v2.0.0

      server: {
        mode: "development",
        middlewareMode: true,
      },

      build: {
        mode: "production",
      },

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

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

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

    // Options passed to the Eleventy Dev Server
    // e.g. domdiff, enabled, etc.

    // Added in Vite plugin v2.0.0
    serverOptions: {},

    // Defaults are shown:
    viteOptions: {
      clearScreen: false,
      appType: "mpa", // New in v2.0.0

      server: {
        mode: "development",
        middlewareMode: true,
      },

      build: {
        mode: "production",
      },

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

See the full list of serverOptions on the Dev Server documentation.

Other pages in Watch and Serve