Menu
- Why Eleventy?
- Getting Started
- Community
- Working with Templates
- Using Data
- Configuration
- Template Languages
- Plugins
- API Services
- Release History
- Advanced
Eleventy
5.81sGatsby
43.36sVite 
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
Related Jump to heading
slinkityby @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-eleventyby @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);
};Expand for full list of options
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
// 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.