Vite plugin Eleventy

Vite plugin to use Eleventy server to render HTML pages. Features :

• Dev mode : Uses Eleventy as middleware in vite server to render HTML pages
• Build mode : Run Eleventy and inject pages in ViteJs inputs as postprocess

Configuration

import vitePluginEleventy from '@rohenha/vite-plugin-eleventy'

export default defineConfig({
  plugins: [
    vitePluginEleventy({
      outputDir: '_site',
      eleventyDir: '.eleventy',
      srcDir: 'src',
      assetsDir: 'assets',
    })
  ]
})

Options

Option	Type	Défaut	Description
srcDir	string	'src'	Eleventy source folder
eleventyDir	string	'.eleventy'	Eleventy tmp output folder
outputDir	string	'_site'	Vite output folder
assetsDir	string	'assets'	Vite assets folder

Usage

Dev

npm run dev

This plugin will :

1. Build eleventy pages on start
2. Watch files generated by Eleventy ${eleventyDir}/
3. Rebuild on pages modified
4. Reload browser

Prod

npm run build

First build eleventy pages, then optimise assets with Vite