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