pug-plain-loader

1.1.0 verified Sat Apr 25 auth: no javascript

pug-plain-loader is a Webpack loader that compiles Pug templates into plain HTML. Version 1.1.0 supports Pug 2.x and 3.x, with active maintenance. It is designed for use with vue-loader v15+ to preprocess <template lang="pug"> blocks in Vue single-file components. Unlike pug-html-loader (unmaintained), this loader stays current with Pug releases. It sets doctype to 'html' by default for Vue fragments and can be chained with raw-loader for importing .pug files as HTML strings in JavaScript. Released infrequently.

Common errors

error Module not found: Error: Can't resolve 'pug' ↓

cause pug is a peer dependency and not installed.

fix

npm install -D pug

error Module build failed (from ./node_modules/pug-plain-loader/index.js): Error: Cannot find module 'pug' ↓

cause Same as above - missing pug peer dependency.

fix

npm install -D pug

Warnings

gotcha Using raw-loader in the same rule as pug-plain-loader without oneOf will break Vue component templates. ↓

fix Use oneOf to separate rules: exclude .vue files from the raw-loader chain.

deprecated doctype option defaults to 'html'; not setting it may cause issues for non-HTML fragments. ↓

fix If you need a different doctype, explicitly set options.doctype in webpack config.

gotcha Peer dependency pug must be installed separately; missing it causes runtime errors. ↓

fix Run 'npm install -D pug' alongside pug-plain-loader.

Install

npm install pug-plain-loader

yarn add pug-plain-loader

pnpm add pug-plain-loader

Imports

pug-plain-loader (webpack loader)
wrong
```
import pugPlainLoader from 'pug-plain-loader'
```
correct
```
module.exports = { module: { rules: [ { test: /\.pug$/, loader: 'pug-plain-loader' } ] } }
```
This package is a webpack loader, not a JavaScript module. Configure it in webpack.config.js under module.rules.

pug-plain-loader + raw-loader

wrong

module.exports = { module: { rules: [ { test: /\.pug$/, use: ['raw-loader', 'pug-plain-loader'] } ] } }

correct

module.exports = { module: { rules: [ { test: /\.pug$/, oneOf: [ { exclude: /\.vue$/, use: ['raw-loader', 'pug-plain-loader'] }, { use: ['pug-plain-loader'] } ] } ] } }

Using raw-loader with pug-plain-loader on Vue component templates will break. Use oneOf to exclude .vue files from the raw-loader chain.

data option

wrong

module.exports = { module: { rules: [ { test: /\.pug$/, loader: 'pug-plain-loader', options: { data: 'value' } } ] } }

correct

module.exports = { module: { rules: [ { test: /\.pug$/, loader: 'pug-plain-loader', options: { data: { myVar: 'value' } } } ] } }

The data option must be an object containing locals passed to the template. It is typically not recommended when using with Vue components.

Quickstart

Shows installation, webpack configuration for Vue single-file components, and a basic Pug template in a .vue file.

// Install: npm install -D pug-plain-loader pug
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      }
    ]
  }
};

// App.vue (Vue single-file component)
<template lang="pug">
  div
    h1 Hello World
    p This is a Pug template inside a Vue component.
</template>

<script>
export default {
  name: 'App'
}
</script>