# vite-plugin-ejs

> Use Ejs in your entrypoint i.e index.html

Latest version **2.0.0** (published 2026-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-ejs
pnpm add vite-plugin-ejs
yarn add vite-plugin-ejs
bun add vite-plugin-ejs
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-06-24 |
| First published | 2021-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 68 |
| Author | trapcodeio |
| Maintainers | trapcode |
| Keywords | vite, vite-plugin-ejs, ejs |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-ejs
- Repository: https://github.com/trapcodeio/vite-plugin-ejs
- Homepage: https://github.com/trapcodeio/vite-plugin-ejs#readme
- Issues: https://github.com/trapcodeio/vite-plugin-ejs/issues
- npm.io page: https://npm.io/package/vite-plugin-ejs

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-06-24
- 1.8.0 — 2026-06-24
- 1.7.1 — 2026-06-23
- 1.7.0 — 2023-11-16
- 1.6.4 — 2022-11-16
- 1.6.3 — 2022-11-16
- 1.6.2 — 2022-11-13
- 1.6.1 — 2022-11-13
- 1.6.0 — 2022-11-13
- 1.5.0 — 2022-07-13
- 1.4.4 — 2022-02-16
- 1.4.3 — 2021-11-10
- 1.4.2 — 2021-11-10
- 1.4.1 — 2021-07-16
- 1.4.0 — 2021-07-16
- … 10 more at https://npm.io/package/vite-plugin-ejs/versions

## README

# vite-plugin-ejs

Use [ejs](https://www.npmjs.com/package/ejs) template language in your entrypoint i.e `index.html`


## Menu

- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
    - [Default Data](#default-data)
    - [Configure EJS](#configure-ejs)

### Requirements

`ejs` is a **peer dependency**, so you install it yourself. This lets you pick the `ejs` version
you want (any of `3`, `4`, `5`, or `6`) instead of being locked to whatever the plugin bundles.

### Installation

Install the plugin together with `ejs`:

```sh
npm i vite-plugin-ejs ejs
# or
yarn add vite-plugin-ejs ejs
```

### Usage

File: **vite.config.js**

```javascript
import {defineConfig} from "vite";
import {ViteEjsPlugin} from "vite-plugin-ejs";

export default defineConfig({
  plugins: [
    // Without Data
    ViteEjsPlugin(),
    
    // With Data
    ViteEjsPlugin({
      domain: "example.com",
      title: "My vue project!"
    }),
    
    // Or With Vite Config
    ViteEjsPlugin((viteConfig) => {
      // viteConfig is the current viteResolved config.
      return {
        root: viteConfig.root,
        domain: "example.com",
        title: "My vue project!"
      }
    }),
  ],
});
```

File: **index.html**

```ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title><%= domain %> | <%= title %></title>

    <!-- Run Conditions-->
    <% if(isDev){ %>
        <script src="/path/to/development-only-script.js"></script>
    <% } else { %>
        <script src="/path/to/production-only-script.js" crossorigin="anonymous"></script>
    <% } %>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
```

Note: `isDev` is included in your data by default

### Default Data

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

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

### Configure EJS

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

```js   
export default defineConfig({
  plugins: [
    ViteEjsPlugin(
        {title: 'My vue project!'},
        {
          ejs: {
            // ejs options goes here.
            beautify: true,
          },
        }
    ),
  ],
});
```

If you want to use `viteconfig` to configure ejs, 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: [
    ViteEjsPlugin(
        {title: 'My vue project!'},
        {
          ejs: (viteConfig) => ({
            // ejs options goes here.
            views: [viteConfig.publicDir]
          })
        }
    ),
  ],
});
```

---
_Source: https://npm.io/package/vite-plugin-ejs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._