PUG templating Working with the PUG template engine in Animmaster Vite Template

What is PUG?

PUG is a powerful HTML templating engine that allows you to write markup using indentation instead of closing tags. This results in shorter, more readable code and faster development.

Enable PUG processing

To start using PUG, enable it in the build configuration file template.config.js.

pug: {
  enable: true
}

Connect a PUG file

To use a PUG template on a page, include it directly in an HTML file using the <pug> tag.

<pug src="@pug/index.pug"></pug>

The specified PUG file will be compiled and injected into the final HTML during development and build.

Where to work with PUG files

All PUG source files are stored in the following directory:

After enabling PUG and connecting files, simply run: npm run dev and start editing your PUG templates.

Typical workflow

• Enable PUG in template.config.js
• Create PUG files in src/pug
• Connect them via <pug src="...">
• Run npm run dev
• Write clean, structured markup with PUG

Download

PUG support is just one part of the powerful workflow inside Animmaster Vite Template. Download the template and build projects faster with a clean, modern setup.