Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rspack-contrib/rsbuild-plugin-pug
An Rsbuild plugin to provide support for the Pug template engine.
https://github.com/rspack-contrib/rsbuild-plugin-pug
rsbuild rsbuild-plugin rspack
Last synced: about 1 month ago
JSON representation
An Rsbuild plugin to provide support for the Pug template engine.
- Host: GitHub
- URL: https://github.com/rspack-contrib/rsbuild-plugin-pug
- Owner: rspack-contrib
- License: mit
- Created: 2024-07-01T07:20:29.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-27T05:26:06.000Z (about 2 months ago)
- Last Synced: 2024-11-27T06:26:47.352Z (about 2 months ago)
- Topics: rsbuild, rsbuild-plugin, rspack
- Language: TypeScript
- Homepage:
- Size: 326 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rspack - @rsbuild/plugin-pug
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.
## 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
p Hello #{text}!
Hello World!
```
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"
button.my-button(@click='count++') Count is: {{ count }}
import { ref } from "vue";
export default {
setup() {
const count = ref(0);
return {
count,
};
},
};
```
## 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).