Awesome

@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:

npm add @rsbuild/plugin-pug -D

Add plugin to your rsbuild.config.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:

export default {
  html: {
    template: "./src/index.pug",
  },
};

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

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

<!-- Output -->
<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:

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

• Type: Object | Function | undefined
• Default:

const defaultOptions = {
  doctype: "html",
  compileDebug: false,
};

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

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.

pluginPug({
  pugOptions(config) {
    config.doctype = "xml";
  },
});

License

MIT.