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: 14 days 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-25T20:19:09.000Z (about 2 months ago)
• Last Synced: 2024-10-10T08:40:55.580Z (about 1 month ago)
• Topics: pug, pug-template-engine, vite
• Language: JavaScript
• Homepage:
• Size: 143 KB
• Stars: 36
• Watchers: 1
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Test](https://github.com/TheSeally/vite-plugin-pug-transformer/actions/workflows/test.yml/badge.svg)](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


```