@teskon/vite-plugin-ejs-engine
Thiis is a fork of vite-plugin-ejs-engine
Vite plugin for Ejs.
Supports:
Install
Yarn
yarn add @teskon/vite-plugin-ejs-engine -D
or npm
npm i @teskon/vite-plugin-ejs-engine --save-dev
Usage
Configuration
Use plugin in your Vite config (vite.config.ts)
import ejs from '@teskon/vite-plugin-ejs-engine'
export default {
plugins: [
ejs(),
]
}
If you're not using typescript you can enable the plugin by calling the method ejs.default in the vite.config.js file, as such:
import ejs from '@teskon/vite-plugin-ejs-engine'
export default {
plugins: [
ejs.default(),
],
};
Options
This fork enables injection of variables by passing the variables into the ejs method, for example:
import ejs from '@teskon/vite-plugin-ejs-engine'
export default {
plugins: [
ejs.default({
inject: {
title: 'Hello world',
},
}),
],
};
You will then be able to use that variable in your template files as such:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Below you can see all available options that you can apply to this plugin.
| property | default | description |
|---|
inject | - | Data injected into HTML. |
ejsOptions | - | ejs options, @See |
Example
Input (src/index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
<!-- variable declaration -->
<% var users = [{name: 'Jose'}, {name: 'Pedro'}]; %>
<!-- variable and partial usage -->
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
</body>
</html>
Template (src/user/show.ejs):
<li><%= user.name %></li>
Output (dist/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
<ul>
<li>Jose</li>
<li>Pedro</li>
</ul>
</body>
</html>
