{"id":20484,"library":"pug-plain-loader","title":"pug-plain-loader","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/yyx990803/pug-plain-loader","tags":["javascript","pug","loader","webpack","plain"],"install":[{"cmd":"npm install pug-plain-loader","lang":"bash","label":"npm"},{"cmd":"yarn add pug-plain-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add pug-plain-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - the Pug compiler is required at runtime","package":"pug","optional":false}],"imports":[{"note":"This package is a webpack loader, not a JavaScript module. Configure it in webpack.config.js under module.rules.","wrong":"import pugPlainLoader from 'pug-plain-loader'","symbol":"pug-plain-loader (webpack loader)","correct":"module.exports = { module: { rules: [ { test: /\\.pug$/, loader: 'pug-plain-loader' } ] } }"},{"note":"Using raw-loader with pug-plain-loader on Vue component templates will break. Use oneOf to exclude .vue files from the raw-loader chain.","wrong":"module.exports = { module: { rules: [ { test: /\\.pug$/, use: ['raw-loader', 'pug-plain-loader'] } ] } }","symbol":"pug-plain-loader + raw-loader","correct":"module.exports = { module: { rules: [ { test: /\\.pug$/, oneOf: [ { exclude: /\\.vue$/, use: ['raw-loader', 'pug-plain-loader'] }, { use: ['pug-plain-loader'] } ] } ] } }"},{"note":"The data option must be an object containing locals passed to the template. It is typically not recommended when using with Vue components.","wrong":"module.exports = { module: { rules: [ { test: /\\.pug$/, loader: 'pug-plain-loader', options: { data: 'value' } } ] } }","symbol":"data option","correct":"module.exports = { module: { rules: [ { test: /\\.pug$/, loader: 'pug-plain-loader', options: { data: { myVar: 'value' } } } ] } }"}],"quickstart":{"code":"// Install: npm install -D pug-plain-loader pug\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        loader: 'pug-plain-loader'\n      }\n    ]\n  }\n};\n\n// App.vue (Vue single-file component)\n<template lang=\"pug\">\n  div\n    h1 Hello World\n    p This is a Pug template inside a Vue component.\n</template>\n\n<script>\nexport default {\n  name: 'App'\n}\n</script>","lang":"javascript","description":"Shows installation, webpack configuration for Vue single-file components, and a basic Pug template in a .vue file."},"warnings":[{"fix":"Use oneOf to separate rules: exclude .vue files from the raw-loader chain.","message":"Using raw-loader in the same rule as pug-plain-loader without oneOf will break Vue component templates.","severity":"gotcha","affected_versions":"all"},{"fix":"If you need a different doctype, explicitly set options.doctype in webpack config.","message":"doctype option defaults to 'html'; not setting it may cause issues for non-HTML fragments.","severity":"deprecated","affected_versions":"all"},{"fix":"Run 'npm install -D pug' alongside pug-plain-loader.","message":"Peer dependency pug must be installed separately; missing it causes runtime errors.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install -D pug","cause":"pug is a peer dependency and not installed.","error":"Module not found: Error: Can't resolve 'pug'"},{"fix":"npm install -D pug","cause":"Same as above - missing pug peer dependency.","error":"Module build failed (from ./node_modules/pug-plain-loader/index.js):\nError: Cannot find module 'pug'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}