Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TheSeally/vite-plugin-pug-transformer
Vite plugin for supporting pug templates
https://github.com/TheSeally/vite-plugin-pug-transformer
pug pug-template-engine vite
Last synced: about 1 month ago
JSON representation
Vite plugin for supporting pug templates
- Host: GitHub
- URL: https://github.com/TheSeally/vite-plugin-pug-transformer
- Owner: TheSeally
- License: mit
- Created: 2022-02-05T19:52:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-10T09:26:26.000Z (about 1 month ago)
- Last Synced: 2024-04-10T10:36:13.149Z (about 1 month ago)
- Topics: pug, pug-template-engine, vite
- Language: JavaScript
- Homepage:
- Size: 117 KB
- Stars: 34
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vite - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
- awesome-viter - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-pug-transformer - Pug template engine support. (Plugins / Framework-agnostic Plugins)
README
[](https://github.com/TheSeally/vite-plugin-pug-transformer/actions/workflows/test.yml)
# Vite plugin pug transformer
This plugin adds support for pug template engine in vite html entrypoint.
Plugin uses Vite specific hook (`transformIndexHtml`) for transforming pug into html.
## Table of Contents
- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
- [Plugin options](#plugin-options)
- [Example](#example)
## Requirements
- Vite v2+
- Node.js version depends on Vite version:
- Vite v2 requires Node.js v12.22 or higher;
- Vite v3, v4 requires Node.js v14.18 or higher;
- Vite v5 requires Node.js v18 or higher;
## Installation
You can use any package manager to install plugin:
```
npm install vite-plugin-pug-transformer
// OR
yarn add vite-plugin-pug-transformer
// OR
pnpm install vite-plugin-pug-transformer
```
Then it can be added to vite config:
```js
// vite.config.js
import vitePugPlugin from 'vite-plugin-pug-transformer';
export default {
plugins: [vitePugPlugin()],
};
```
## Usage
Plugin syntax don't break html semantics.
It uses `template` tag with two attributes `data-type` and `data-src`.
Pass `pug` to `data-type` attribute and path to pug template to `data-src` attribute.
```html
```
Also you can use multiple `template` tags on page
## Plugin options
Plugin supports additional options
| Parameter | Default | Description
| ---------- | ------- | -----------
| pugOptions | `{}` | [Pug options](https://pugjs.org/api/reference.html#options)
| pugLocals | `{}` | Variables that can be used in pug template. Can be used to pass env variables
## Example
Vite entrypoint:
```html
Pug Plugin
```
Pug template:
```
p #{bundler} is the best
```
Vite config:
```js
// vite.config.js
import vitePugPlugin from 'vite-plugin-pug-transformer';
const locals = { bundler: 'Vite' };
export default {
plugins: [vitePugPlugin({ pugLocals: locals })],
};
```
The result would be:
```html
Pug Plugin
Vite is the best
```