Pug Plugin#

The Pug plugin provides support for the Pug template engine. Pug is a robust, elegant, feature rich template engine for Node.js.

Quick Start#

Install Plugin#

You can install the plugin using the following command:

npm add @rsbuild/plugin-pug -D

Register Plugin#

You can register the plugin in the rsbuild.config.ts file:

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';
  },
});