vite-plugin-ejs

vite-plugin-ejs

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

Menu

• Requirements
• Installation
• Usage
  • Default Data
  • 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:

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

Usage

File: vite.config.js

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]
          })
        }
    ),
  ],
});