Registry / web-framework / pug-plain-loader

pug-plain-loader

JSON →
library1.1.0jsnpmunverified

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.

npm install pug-plain-loader
INSTALL
IMPORT
SIG · PUG-PLAIN-LOADER
P
pug-plain-loader
web-frameworkjavascriptv1.1.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

pug-plain-loader (webpack loader)
module.exports = { module: { rules: [ { test: /\.pug$/, loader: 'pug-plain-loader' } ] } }
import pugPlainLoader from '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
module.exports = { module: { rules: [ { test: /\.pug$/, oneOf: [ { exclude: /\.vue$/, use: ['raw-loader', 'pug-plain-loader'] }, { use: ['pug-plain-loader'] } ] } ] } }
module.exports = { module: { rules: [ { test: /\.pug$/, use: ['raw-loader', '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
module.exports = { module: { rules: [ { test: /\.pug$/, loader: 'pug-plain-loader', options: { data: { myVar: 'value' } } } ] } }
module.exports = { module: { rules: [ { test: /\.pug$/, loader: 'pug-plain-loader', options: { data: 'value' } } ] } }
The data option must be an object containing locals passed to the template. It is typically not recommended when using with Vue components.

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>
Debug
Known issues
gotchaUsing 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.
affects: all
deprecateddoctype 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.
affects: all
gotchaPeer dependency pug must be installed separately; missing it causes runtime errors.
fix
Run 'npm install -D pug' alongside pug-plain-loader.
affects: all
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'pug'
pug is a peer dependency and not installed.
fix
npm install -D pug
Module build failed (from ./node_modules/pug-plain-loader/index.js): Error: Cannot find module 'pug'
Same as above - missing pug peer dependency.
fix
npm install -D pug
Upgrade
Version history
1.1.0latest on npm
Audit
Dependencies
pugrequiredpeer dependency - the Pug compiler is required at runtime
Agent activity
6 hits · last 30 days
node
6
Resources
pug-plain-loader — npm install pug-plain-loader · libregistry