vite-plugin-ejs

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

Note: For Vite version < 5 use v1.6.4 of this plugin.

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

<!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.

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

Configure EJS

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

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.

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

Kunado/vite-plugin-ejs

vite-plugin-ejs

Menu

Installation

Usage

Default Data

Configure EJS