@rinoshiyo/vite-plugin-eta

Use Eta template language in your entrypoint i.e index.html

Compatibility Note: This plugin requires Vite v5 or newer.

Menu

- Installation
- Usage
- Default Data
- Configure Eta

$3

``sh
npm i @rinoshiyo/vite-plugin-eta


or


yarn add @rinoshiyo/vite-plugin-eta
`

$3

File: vite.config.js

`javascript
import {defineConfig} from "vite";
import {ViteEtaPlugin} from "@rinoshiyo/vite-plugin-eta";

export default defineConfig({
plugins: [
// Without Data
ViteEtaPlugin(),

// With Data
ViteEtaPlugin({
domain: "example.com",
title: "My vue project!"
}),

// Or With Vite Config
ViteEtaPlugin((viteConfig) => {
// viteConfig is the current viteResolved config.
return {
root: viteConfig.root,
domain: "example.com",
title: "My vue project!"
}
}),
],
});
`

File: index.html

`ejs









<% if(isDev){ %>

<% } else { %>

<% } %>








`

Note: isDev is included in your data by default

$3

The object below is the default data of the render function.

`javascript
return {
NODE_ENV: config.mode,
isDev: config.mode === "development"
}
`

$3

You can configure Eta by passing an object to the plugin.

`js
export default defineConfig({
plugins: [
ViteEtaPlugin(
{title: 'My vue project!'},
{
eta: {
// Eta options goes here.
cache: false
},
}
),
],
});
`

If you want to use viteconfig to configure Eta, you can pass a function to the plugin, the function will receive the current vite config as the first argument.

`js
export default defineConfig({
plugins: [
ViteEtaPlugin(
{title: 'My vue project!'},
{
eta: (viteConfig) => ({
// Eta options goes here.
views: viteConfig.publicDir
})
}
),
],
});
`

---

🧡 Acknowledgements

This project is a fork of the original vite-plugin-eta created by moyui默羽. I extend my sincere thanks to the original author for creating and maintaining the initial project.

Furthermore, the structure and documentation of this plugin were heavily inspired by the excellent work done on vite-plugin-ejs` by trapcodeio.