Vite 中文文档

vite-plugin-pug


test

A plugin that makes Vite parse <pug src="example.pug"></pug> in your index.html. The rendered template replaces this tag with the compiled markup.

ℹ️Vuesingle file components don’t require this plugin, adding Pug to the dependency list is enough. — aka npm i -D pug


Features


CommonJS and ES module builds.
Handle self-closing pug tags.
Works with multiple pug tags.
Generated TypeScriptdeclarations.
Reload when saving changes on a .pug file.
Support Pug local variables.
Templates for multiple inputs.
Experimental hot module reloading functionality.
Handle adding or removing files.

Add to a project


Installation


Choose your appropriate choice:

  1. ``` shell
  2. $ npm i -D vite-plugin-pug
  3. $ pnpm add -D vite-plugin-pug
  4. $ yarn add -D vite-plugin-pug
  5. ```

Configuration


Create a vite.config.js configuration file and import the plugin:

  1. ``` js
  2. // vite.config.(js|ts)
  3. import { defineConfig } from "vite"
  4. import pugPlugin from "vite-plugin-pug"

  6. const options = { pretty: true } // FIXME: pug pretty is deprecated!
  7. const locals = { name: "My Pug" }

  9. export default defineConfig({
  10.   plugins: [pugPlugin(options, locals)],
  11. })
  12. ```

Plugin Parameters


Name Required Description
:--- :--- :---
options optional Plugin options object.
locals optional Data object with Pug locals.

Plugin Options


Name Required Description
:--- :--- :---
... optional Anything from Pug options object.
localImports optional If true, use relative imports in the pug src attribute.

Usage


Simple


Create a template file.

  1. ``` jade
  2. //- index.pug
  3. h1 Hello World
  4. p I'm a cool Vite project!
  5. ```

Embed pug tag with src attribute somewhere.

  1. ``` html
  2. !-- index.html -->
  3. <html>
  4.   <body>
  5.     <pug src="index.pug" />
  6.     <script type="module" src="/main.ts"></script>
  7.   </body>
  8. </html>
  9. ```

That's it.

💡Check out its starterimplementation in this repository.


Examples


Please find the examples folder in this repository.

Contribution


After RollupI started to use Viterecently but this is not a reason to leave my beloved template format behind. Its lack of active Pug plugins made me make one quickly. It does the job to me, I will extend it when I need it. :suspect:

If it doesn't match with your setup please start a new discussion about it, I'm interested to see other workflows. If something is simply not working, please raise an issue. PRs certainly welcome!(.❛ ᴗ ❛.)