Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trapcodeio/vite-plugin-ejs
Vite: Use Ejs in your entypoints i.e index.html
https://github.com/trapcodeio/vite-plugin-ejs
ejs vite
Last synced: 3 days ago
JSON representation
Vite: Use Ejs in your entypoints i.e index.html
- Host: GitHub
- URL: https://github.com/trapcodeio/vite-plugin-ejs
- Owner: trapcodeio
- Created: 2021-04-09T00:41:28.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-16T20:56:27.000Z (about 1 year ago)
- Last Synced: 2024-12-31T20:13:01.041Z (10 days ago)
- Topics: ejs, vite
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/vite-plugin-ejs
- Size: 79.1 KB
- Stars: 66
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# vite-plugin-ejs
Use [ejs](https://www.npmjs.com/package/ejs) template language in your entrypoint i.e `index.html`
**Note:** For Vite version < `5` use [`v1.6.4`](https://www.npmjs.com/package/vite-plugin-ejs/v/1.6.4) of this plugin.
## Menu
- [Installation](#installation)
- [Usage](#usage)
- [Default Data](#default-data)
- [Configure EJS](#configure-ejs)
### Installation
```sh
npm i vite-plugin-ejs
# or
yarn add vite-plugin-ejs
```
### Usage
File: **vite.config.js**
```javascript
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**
```ejs
<%= domain %> | <%= title %>
<% if(isDev){ %>
<% } else { %>
<% } %>
```
Note: `isDev` is included in your data by default
### Default Data
The object below is the default data of the render function.
```javascript
return {
NODE_ENV: config.mode,
isDev: config.mode === "development"
}
```
### Configure EJS
You can configure ejs by passing an object to the plugin.
```js
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.
```js
export default defineConfig({
plugins: [
ViteEjsPlugin(
{title: 'My vue project!'},
{
ejs: (viteConfig) => ({
// ejs options goes here.
views: [viteConfig.publicDir]
})
}
),
],
});
```