vite-plugin-ejs

Use Ejs in your entrypoint i.e index.html

Usage no npm install needed!

<script type="module">
  import vitePluginEjs from 'https://cdn.skypack.dev/vite-plugin-ejs';
</script>

README

vite-plugin-ejs

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

Install

npm i vite-plugin-ejs
# or
yarn add vite-plugin-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"
}