Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
3.0.0
Toggle Menu
Eleventy 5.81s
Gatsby 43.36s

Vite IndieWeb Avatar for https://vitejs.dev/

Contents

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
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: