Vite

Contents

Related
Installation

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

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

ESM CommonJS

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

ESM CommonJS

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.

Vite

Related

Installation

Other pages in Watch and Serve: