@rsbuild/plugin-pug

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

Pug is a robust, elegant, feature rich template engine for Node.js.

Usage

Install:

1npm add @rsbuild/plugin-pug -D

Add plugin to your rsbuild.config.ts:

1// rsbuild.config.ts
2import { pluginPug } from "@rsbuild/plugin-pug";
3
4export default {
5  plugins: [pluginPug()],
6};

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:

1export default {
2  html: {
3    template: "./src/index.pug",
4  },
5};

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

1<!-- Input -->
2p Hello #{text}!
3
4<!-- Output -->
5<p>Hello World!</p>

Please refer to the Pug documentation 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:

1<template lang="pug">
2button.my-button(@click='count++') Count is: {{ count }}
3</template>
4
5<script>
6import { ref } from "vue";
7
8export default {
9  setup() {
10    const count = ref(0);
11
12    return {
13      count,
14    };
15  },
16};
17</script>

Options

pugOptions

Used to set the compilation options for Pug. For detailed options, please refer to the Pug API Reference.

• Type: Object | Function | undefined
• Default:

1const defaultOptions = {
2  doctype: "html",
3  compileDebug: false,
4};

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

1pluginPug({
2  pugOptions: {
3    doctype: "xml",
4  },
5});

• 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.

1pluginPug({
2  pugOptions(config) {
3    config.doctype = "xml";
4  },
5});

License

MIT.