Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/11ty/eleventy-plugin-vite
A plugin to use Vite with Eleventy
https://github.com/11ty/eleventy-plugin-vite
Last synced: 7 days ago
JSON representation
A plugin to use Vite with Eleventy
- Host: GitHub
- URL: https://github.com/11ty/eleventy-plugin-vite
- Owner: 11ty
- Created: 2022-03-17T16:07:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-05T17:43:21.000Z (4 months ago)
- Last Synced: 2024-10-29T15:44:52.944Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 296 KB
- Stars: 138
- Watchers: 7
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - 11ty/eleventy-plugin-vite - A plugin to use Vite with Eleventy (others)
README
# eleventy-plugin-vite 🕚⚡️🎈🐀
A plugin to use [Vite v5](https://vitejs.dev/) with Eleventy v3.
This plugin:
- Runs Vite as Middleware in Eleventy Dev Server (try with Eleventy’s `--incremental`)
- Runs Vite build to postprocess your Eleventy build output
## Eleventy Housekeeping
- Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/)!
- Follow us on Mastodon [@[email protected]](https://fosstodon.org/@eleventy) or Twitter [@eleven_ty](https://twitter.com/eleven_ty)
- Join us on [Discord](https://www.11ty.dev/blog/discord/)
- Support [11ty on Open Collective](https://opencollective.com/11ty)
- [11ty on npm](https://www.npmjs.com/org/11ty)
- [11ty on GitHub](https://github.com/11ty)
[](https://www.npmjs.com/package/@11ty/eleventy-plugin-vite)
## Installation
```
npm install @11ty/eleventy-plugin-vite@alpha --save-dev
```
### ESM `.eleventy.js` Config
```js
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
export default function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyVitePlugin);
}
```
### CommonJS `.eleventy.js` Config
> [!NOTE]
> This plugin is written in ESM, therefore `require` is not possible. If your .eleventy.js config uses CommonJS, make it async and create a dynamic import as shown below.
```js
module.exports = async function (eleventyConfig) {
const EleventyPluginVite = (await import("@11ty/eleventy-plugin-vite")).default;
eleventyConfig.addPlugin(EleventyPluginVite);
};
```
Read more about ESM vs CommonJS on the [Eleventy documentation](https://www.11ty.dev/docs/cjs-esm/).
### Options
View the [full list of Vite Configuration options](https://vitejs.dev/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
// Defaults
serverOptions: {
module: "@11ty/eleventy-dev-server",
domDiff: false,
},
// Defaults
viteOptions: {
clearScreen: false,
appType: "mpa",
server: {
middlewareMode: true,
},
build: {
emptyOutDir: true,
},
resolve: {
alias: {
// Allow references to `node_modules` folder directly
"/node_modules": path.resolve(".", "node_modules"),
},
},
},
});
}
```
## Related Projects
- [`eleventy-plus-vite`](https://github.com/matthiasott/eleventy-plus-vite) by @matthiasott: A starter template using this plugin
- Currently unmaintained:
- [`slinkity`](https://slinkity.dev/) 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`](https://www.npmjs.com/package/vite-plugin-eleventy) by @Snugug: Uses Eleventy as Middleware in Vite (instead of the post-processing approach used here)