@teskon/vite-plugin-ejs-engine
v1.2.0
Published
Vite plugin for supporting ejs templates
Downloads
98
Maintainers
teskonReadme
@teskon/vite-plugin-ejs-engine
Thiis is a fork of vite-plugin-ejs-engine
Supports:
Install
Yarn
yarn add @teskon/vite-plugin-ejs-engine -Dor npm
npm i @teskon/vite-plugin-ejs-engine --save-devUsage
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>