# @rsbuild/plugin-pug

Latest version **2.0.0** (published 2026-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rsbuild/plugin-pug
pnpm add @rsbuild/plugin-pug
yarn add @rsbuild/plugin-pug
bun add @rsbuild/plugin-pug
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-07-17 |
| First published | 2023-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2 |
| Maintainers | chenjiahan, hardfist3 |

## Links

- npm: https://www.npmjs.com/package/@rsbuild/plugin-pug
- Repository: https://github.com/rstackjs/rsbuild-plugin-pug
- Homepage: https://github.com/rstackjs/rsbuild-plugin-pug#readme
- Issues: https://github.com/rstackjs/rsbuild-plugin-pug/issues
- npm.io page: https://npm.io/package/@rsbuild/plugin-pug

## Dependencies (4)

- [pug](https://npm.io/package/pug.md) ^3.0.4
- [lodash](https://npm.io/package/lodash.md) ^4.18.1
- [@types/pug](https://npm.io/package/@types/pug.md) ^2.0.10
- [reduce-configs](https://npm.io/package/reduce-configs.md) ^1.1.2

## Recent versions

- 2.0.0 (latest) — 2026-07-17
- 1.0.0-alpha.0 (alpha) — 2024-07-02
- 0.0.0-next-20240528072128 (next) — 2024-05-28
- 0.7.0-beta.9 (beta) — 2024-05-24
- 0.0.0-nightly-20240114070311 (nightly) — 2024-01-14
- 1.3.4 — 2026-05-28
- 1.3.3 — 2026-04-22
- 1.3.2 — 2025-08-04
- 1.3.1 — 2025-06-18
- 1.3.0 — 2025-05-27
- 1.2.0 — 2025-05-03
- 1.1.0 — 2025-05-01
- 1.0.2 — 2024-08-07
- 1.0.1 — 2024-07-03
- 0.7.10 — 2024-06-26
- … 152 more at https://npm.io/package/@rsbuild/plugin-pug/versions

## README

# @rsbuild/plugin-pug

An Rsbuild plugin to provide support for the Pug template engine.

> [Pug](https://github.com/pugjs/pug) is a robust, elegant, feature rich template engine for Node.js.

<p>
  <a href="https://npmjs.com/package/@rsbuild/plugin-pug">
   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-pug?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
  </a>
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
</p>

## Usage

Install:

```bash
npm add @rsbuild/plugin-pug -D
```

Add plugin to your `rsbuild.config.ts`:

```ts
// rsbuild.config.ts
import { pluginPug } from '@rsbuild/plugin-pug';

export default {
  plugins: [pluginPug()],
};
```

### Using Pug Templates

After the plugin registration is completed, Rsbuild will automatically parse template files with the `.pug` extension and compile them using the Pug template engine.

For example, first create a `src/index.pug` file, and point to that file using `html.template`:

```ts title="rsbuild.config.ts"
export default {
  html: {
    template: './src/index.pug',
  },
};
```

Then, you can use Pug syntax in the `index.pug` template:

```html
<!-- Input -->
p Hello #{text}!

<!-- Output -->
<p>Hello World!</p>
```

Please refer to the [Pug documentation](https://github.com/pugjs/pug) for a complete understanding of Pug's usage.

### Using in Vue

When using Vue, you can use Pug syntax in the template of `.vue` files:

```vue title="App.vue"
<template lang="pug">
button.my-button(@click='count++') Count is: {{ count }}
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count,
    };
  },
};
</script>
```

## Options

### pugOptions

Used to set the compilation options for Pug. For detailed options, please refer to the [Pug API Reference](https://pugjs.org/api/reference.html#options).

- **Type:** `Object | Function | undefined`
- **Default:**

```ts
const defaultOptions = {
  doctype: 'html',
  compileDebug: false,
};
```

- **Example 1:** Pass in a configuration object that will be merged with the default options using `Object.assign`.

```ts
pluginPug({
  pugOptions: {
    doctype: 'xml',
  },
});
```

- **Example 2:** Pass in a configuration function. The default configuration will be passed as the first argument, and you can directly modify the configuration object or return a value as the final result.

```ts
pluginPug({
  pugOptions(config) {
    config.doctype = 'xml';
  },
});
```

## License

[MIT](./LICENSE).

---
_Source: https://npm.io/package/@rsbuild/plugin-pug · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._