{"id":14967571,"url":"https://github.com/webdiscus/pug-loader","last_synced_at":"2025-04-04T08:03:27.023Z","repository":{"id":45493849,"uuid":"419003596","full_name":"webdiscus/pug-loader","owner":"webdiscus","description":"Pug loader for Webpack renders pug to HTML or template function","archived":false,"fork":false,"pushed_at":"2025-02-04T11:19:55.000Z","size":1700,"stargazers_count":81,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T07:02:17.807Z","etag":null,"topics":["html","jade","javascript","js","loader","plugin","pug","pug-loader","pug-plain-loader","scss","template","vue","webpack"],"latest_commit_sha":null,"homepage":"https://webdiscus.github.io/pug-loader/pug-filters","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdiscus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"biodiscus","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-10-19T16:23:22.000Z","updated_at":"2025-03-01T08:08:47.000Z","dependencies_parsed_at":"2023-11-27T17:49:03.043Z","dependency_job_id":"42040bca-df3e-4675-a8d8-2c6f68273323","html_url":"https://github.com/webdiscus/pug-loader","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fpug-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdiscus","download_url":"https://codeload.github.com/webdiscus/pug-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247136743,"owners_count":20889732,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","jade","javascript","js","loader","plugin","pug","pug-loader","pug-plain-loader","scss","template","vue","webpack"],"created_at":"2024-09-24T13:38:17.449Z","updated_at":"2025-04-04T08:03:27.001Z","avatar_url":"https://github.com/webdiscus.png","language":"JavaScript","funding_links":["https://patreon.com/biodiscus"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003e\n        \u003ca href=\"https://pugjs.org\"\u003e\n            \u003cimg height=\"120\" src=\"https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n            \u003cimg height=\"120\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://github.com/webdiscus/pug-loader\"\u003e\u003cbr\u003e\n        Pug Loader\n        \u003c/a\u003e\n    \u003c/h1\u003e\n  \u003cdiv\u003eWebpack loader to render Pug templates\u003c/div\u003e\n\u003c/div\u003e\n\n---\n[![npm](https://img.shields.io/npm/v/@webdiscus/pug-loader?logo=npm\u0026color=brightgreen \"npm package\")](https://www.npmjs.com/package/@webdiscus/pug-loader \"download npm package\")\n[![node](https://img.shields.io/node/v/@webdiscus/pug-loader)](https://nodejs.org)\n[![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/pug-loader/peer/webpack)](https://webpack.js.org/)\n[![Test](https://github.com/webdiscus/pug-loader/actions/workflows/test.yml/badge.svg)](https://github.com/webdiscus/pug-loader/actions/workflows/test.yml)\n[![codecov](https://codecov.io/gh/webdiscus/pug-loader/branch/master/graph/badge.svg?token=457T2BK3YN)](https://codecov.io/gh/webdiscus/pug-loader)\n[![node](https://img.shields.io/npm/dm/@webdiscus/pug-loader)](https://www.npmjs.com/package/@webdiscus/pug-loader)\n\nThe Pug Loader renders Pug templates into HTML or compiles it into a template function.\n\n### 🚀 [Install and Quick Start](#install-and-quick-start)\n\n## 💡 Highlights\n\n- Resolves paths and aliases for **extends**, **include**.\n- Resolves **source asset** files in tag attributes via **require()** function.\n- Resolves **source JS/JSON** files in Pug code via **require()** function.\n- Resolves alias from webpack **resolve.alias** or **tsconfig.json**.\n- Renders Pug template into pure **HTML string**.\n- Compiles Pug template into **template function** for render template in the browser.\n- Generates a template function with both **CommonJS** and **ESM** syntax.\n- Pass data into template from the loader options.\n- Build-in [Pug filters]: [`:escape`] [`:code`] [`:highlight`] [`:markdown`] with highlighting of code blocks\n- Supports an indent in [Vue template](#using-with-vue), see [source of an example](https://github.com/webdiscus/pug-loader/tree/master/examples/hello-world-vue).\n- Watching of changes in all dependencies.\n\n\u003e **Warning**\n\u003e \n\u003e As of **2025**, only this Pug loader **is maintained**. Please support this project by giving it a star ⭐.\\\n\u003e All **other Pug loaders are dead** and have not been maintained for a long time:\n\u003e\n\u003e - [pug-loader](https://www.npmjs.com/package/pug-loader) - last update 2018 (7 years ago)\n\u003e - [pug-html-loader](https://npmjs.com/package/pug-html-loader) - last update 2025 (the second to last update was in 2016, 8 years ago)\n\u003e - [pug-plain-loader](https://www.npmjs.com/package/pug-plain-loader) - last update 2020 (4 years ago)\n\u003e - [simple-pug-loader](https://npmjs.com/package/simple-pug-loader) - last update 2021 (3 years ago)\n\n\u003e **Note**\n\u003e \n\u003e Instead of `html-webpack-plugin` recommended to use [pug-plugin](https://github.com/webdiscus/pug-plugin) or [html-bundler-webpack-plugin ](https://github.com/webdiscus/html-bundler-webpack-plugin).\n\u003e \n\u003e The **Pug Plugin** allow to use a template as an **entrypoint** and generates static HTML or [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) from Pug template containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root).\n\u003e\n\u003e  Please see [usage examples](https://github.com/webdiscus/pug-plugin#usage-examples) and the demo app [Hello World](https://github.com/webdiscus/pug-plugin/tree/master/examples/hello-world).\n\n## Contents\n\n1. [Install and Quick start](#install-and-quick-start)\n   - [Using pug-plugin](#using-pug-plugin)\n   - [Using html-webpack-plugin](#using-html-webpack-plugin)\n2. [Options](#options)\n3. [Using modes](#mode-compile)\n   - [compile](#mode-compile)\n   - [render](#mode-render)\n   - [html](#mode-html)\n4. [Using Pug filters](#embed-filters)\n   - [:escape](#filter-escape)\n   - [:code](#filter-code)\n   - [:highlight](#filter-highlight)\n   - [:markdown](#filter-markdown)\n5. [Passing data into Pug template](#passing-data-into-template)\n6. [Using resources](#using-resources)\n7. [Path Resolving](#resolve-resource-path)\n   - [Path aliases with Webpack](#resolve-webpack-alias)\n   - [Path aliases with TypeScript](#resolve-tsconfig-alias)\n   - [Root path with Webpack context](#resolve-webpack-context)\n   - [Relative path](#resolve-relative-path)\n   - [Interpolation](#resolve-interpolation)\n9. [Using with Angular](#using-with-angular)\n10. [Using with Vue](#using-with-vue)\n11. [Recipes](#recipes)\n12. [Example Hello World!](https://github.com/webdiscus/pug-loader/tree/master/examples/hello-world-app/)\n13. [Example Pug filters](https://github.com/webdiscus/pug-loader/tree/master/examples/pug-filters)\n14. [More examples](https://github.com/webdiscus/pug-loader/tree/master/test/cases)\n\n\n\u003ca id=\"install-and-quick-start\" name=\"install-and-quick-start\" href=\"#install-and-quick-start\"\u003e\u003c/a\u003e\n## Install and Quick start\n\n**Choose your way:**\n\n- Using the [pug-plugin](https://github.com/webdiscus/pug-plugin).\n  It is a **very easy** intuitive way.\n- Using the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) with the **pug-loader**.\n  It is a **very complex** non-intuitive way.\n\n\u003ca id=\"using-pug-plugin\" name=\"using-pug-plugin\"\u003e\u003c/a\u003e\n### Using only the [pug-plugin](https://github.com/webdiscus/pug-plugin)\n\nThe **pug-plugin** contains already the **pug** and **pug-loader** packages.\nFor details and examples please see the [pug-plugin](https://github.com/webdiscus/pug-plugin) site.\n\nInstall the `pug-plugin`:\n\n```\nnpm install pug-plugin --save-dev\n```\n\nInstall additional packages for styles:\n\n```\nnpm install css-loader sass-loader sass --save-dev\n```\n\nStart with a Pug template. Add the `link` and `script` tags.\nYou can include asset source files such as SCSS, JS, images, and other media files directly in a Pug template.\n\nThe plugin resolves `script(src=\"...\")` `link(href=\"...\")` and `img(src=\"...\" srcset=\"...\")` that references your script, style and image source files.\n\nFor example, there is the template ./src/views/home.pug:\n\n```pug\nhtml\n  head\n    //- variable from Webpack config\n    title= title\n    //- relative path to favicon source file\n    link(href=\"./favicon.ico\" rel=\"icon\")\n    //- relative path to SCSS source file\n    link(href=\"./style.scss\" rel=\"stylesheet\")\n    //- relative path to JS source file --\u003e\n    script(src=\"./main.js\" defer=\"defer\")\n  body\n    h1 Hello World!\n    //- relative path to image source file\n    img(src=\"./picture.png\")\n```\n\nAll source filenames should be relative to the entrypoint template, or you can use [Webpack alias](https://webpack.js.org/configuration/resolve/#resolvealias).\nThe references are rewritten in the generated HTML so that they link to the correct output files.\n\nThe generated HTML contains URLs of the output filenames:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHomepage\u003c/title\u003e\n    \u003clink href=\"img/favicon.3bd858b4.ico\" rel=\"icon\" /\u003e\n    \u003clink href=\"css/style.05e4dd86.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript src=\"js/main.f4b855d8.js\" defer=\"defer\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eHello World!\u003c/h1\u003e\n    \u003cimg src=\"img/picture.58b43bd8.png\" /\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf the `entry` plugin option is a path, the plugin finds all templates automatically\nand keep the same directory structure in the output directory.\n\nIf the `entry` plugin option is an object, the key is an output filename without `.html` extension and the value is a template file.\n\nVery simple and clear **webpack.config.js**, all relevant settings are in one place, in plugin options:\n\n```js\nconst path = require('path');\nconst PugPlugin = require('pug-plugin');\n\nmodule.exports = {\n  output: {\n    path: path.join(__dirname, 'dist/'),\n  },\n\n  plugins: [\n    new PugPlugin({\n      // automatically processing all templates in the path\n      entry: 'src/views/',\n      // - OR - define many pages manually (key is output filename w/o `.html`)\n      entry: {\n        // simple page config w/o variables\n        index: 'src/views/home.pug', // =\u003e dist/index.html\n        // advanced page config with variables\n        'news/sport': { // =\u003e dist/news/sport.html\n          import: 'src/views/news/sport/index.pug', // template file\n          data: { title: 'Sport news' }, // pass variables into template\n        },\n      },\n      data: {...}, // pass global data into all templates\n      js: {\n        // JS output filename, used if `inline` option is false (defaults)\n        filename: 'js/[name].[contenthash:8].js',\n        //inline: true, // inlines JS into HTML\n      },\n      css: {\n        // CSS output filename, used if `inline` option is false (defaults)\n        filename: 'css/[name].[contenthash:8].css',\n        //inline: true, // inlines CSS into HTML\n      },\n    })\n  ],\n\n  module: {\n    rules: [\n      {\n        test: /\\.(s?css|sass)$/,\n        use: ['css-loader', 'sass-loader']\n      },\n      {\n        test: /\\.(ico|png|jp?g|webp|svg)$/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'img/[name].[hash:8][ext][query]',\n        },\n      },\n    ],\n  },\n};\n```\n\n\u003e **Note**\n\u003e \n\u003e No additional plugins or loader required.\n\n\u003ca id=\"using-html-webpack-plugin\" name=\"using-html-webpack-plugin\"\u003e\u003c/a\u003e\n### Using with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n\n\u003e **Warning**\n\u003e\n\u003e This way is not recommended!\n\nInstall the `@webdiscus/pug-loader` only if you use the `html-webpack-plugin`.\n\n```\nnpm install @webdiscus/pug-loader html-webpack-plugin --save-dev\n```\n\nInstall additional packages for styles:\n\n```\nnpm install css-loader sass-loader sass --save-dev\n```\n\nInstall additional plugin to extract CSS:\n\n```\nnpm install mini-css-extract-plugin --save-dev\n```\n\nUsing the `html-webpack-plugin` you should require a source asset file in the Pug template. \n\nFor example, there is the template ./src/views/home.pug:\n\n```pug\nhtml\n  head\n    //- variable from plugin options, very ugly access\n    title= htmlWebpackPlugin.options.data.title\n    //- relative path to favicon source file\n    link(href=require(\"./favicon.ico\") rel=\"icon\")\n    //- JS and CSS will be injected into HTML automatically, anywhere here\n    //- Note: you have no control over the position or order of injected files\n  body\n    h1 Home\n    //- relative path to image source file\n    img(src=require(\"./picture.png\"))\n```\n\nVery complex **webpack.config.js**:\n\n```js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n  output: {\n    path: path.join(__dirname, 'dist/'),\n    // JS output filename must be defined only here\n    filename: 'js/[name].[contenthash:8].js',\n  },\n\n  entry: {\n    // Source files of styles and scripts must be defined here, separately from their templates.\n    // How to bind each generated bundle to the HTML page?\n    // Answer: using the `chunks` plugin option.\n    index: ['./src/views/home/main.js', './src/views/home/style.scss'],\n    'news/sport': ['./src/views/news/sport/main.js', './src/views/news/sportstyle.scss'],\n  },\n\n  plugins: [\n    // For one page must be initialized the plugin instance.\n    new HtmlWebpackPlugin({\n      template: path.join(__dirname, 'src/views/home/index.pug'),\n      // HTML output filename\n      filename: 'index.html',\n      // bind the generated JS and CSS files to this template via chunks,\n      // this is a very terrible \"crutch\"\n      chunks: ['index'],\n      // pass variables into template,\n      // access in template is very ugly: `htmlWebpackPlugin.options.data.title`\n      data: { title: 'Home' }\n    }),\n\n    // For other page must be initialized yet one plugin instance.\n    // It's very very bad practice and ugly syntax!\n    new HtmlWebpackPlugin({\n      template: path.join(__dirname, 'src/views/news/sport/index.pug'),\n      // HTML output filename\n      filename: 'news/sport.html',\n      // bind the generated JS and CSS files to this template via chunks option,\n      // you're not confused yet using chunks?\n      chunks: ['news/sport'],\n      // access in template is very ugly: `htmlWebpackPlugin.options.data.title`,\n      // using `pug-plugin`, the variable in Pug is accessible w/o any scope: `title` \n      // (of cause, in `pug-plugin` you can define a variable scope, if you want)\n      data: { title: 'Sport news' }\n    }),\n    \n    // ... Do you have the joy of adding yet one page using the HtmlWebpackPlugin?\n    // No? Then try to use the `pug-plugin`.\n\n    // Yet one plugin to extract CSS and inject one into HTML.\n    new MiniCssExtractPlugin({\n      // CSS output filename defined in another place, here\n      filename: 'css/[name].[contenthash:8].css',\n    }),\n  ],\n\n  module: {\n    rules: [\n      // requires to define the pug loader\n      {\n        test: /\\.pug$/,\n        loader: '@webdiscus/pug-loader',\n      },\n      {\n        test: /\\.(s?css|sass)$/,\n        // requires additional MiniCssExtractPlugin loader\n        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],\n      },\n      {\n        test: /\\.(png|jpe?g|ico)/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'img/[name].[hash:8][ext]',\n        },\n      },\n    ],\n  },\n};\n```\n\nWhy do many developers switch from Webpack to other bundlers?\nOne of the reasons they cite is the complex configuration many different plugins and loaders for one simple thing - rendering an HTML page with assets.\n\nThe [pug-plugin](https://github.com/webdiscus/pug-plugin) \"changes the rule of the game\".\nJust one plugin replaces the functionality of many [plugins and loaders](https://github.com/webdiscus/html-bundler-webpack-plugin#list-of-plugins) and makes configuration very simple and clear.\n\n### Using in JavaScript\n\nA Pug template can be used in JavaScript code as template function with custom data.\n\nInstall the `pug-loader`.\n\n```\nnpm install @webdiscus/pug-loader --save-dev\n```\n\nChange your **webpack.config.js** according to the following minimal configuration:\n\n```js\nconst path = require('path');\n\nmodule.exports = {\n  output: {\n    path: path.join(__dirname, 'public/'),\n    publicPath: '/', // must be defined any path, `auto` is not supported yet\n  },\n  entry: {\n    index: './src/index.js', // load a Pug template in JS\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        loader: '@webdiscus/pug-loader',\n      },\n    ],\n  },\n};\n```\n\nLoad a Pug template in JavaScript. Optional you can pass any data into generated template function.\n\n**./src/index.js**\n\n```js\nconst tmpl = require('template.pug');\nconst html = tmpl({\n  myVar: 'value',\n});\n```\n\n---\n\n\u003ca id=\"options\" name=\"options\" href=\"#options\"\u003e\u003c/a\u003e\n## Original options\n\n[See original description of options](https://pugjs.org/api/reference.html#options)\n\n### `basedir`\n\nType: `string` Default: `/`\u003cbr\u003e\nThe root directory of all absolute inclusion.\n\n### `doctype`\n\nType: `string` Default: `html`\u003cbr\u003e\nSpecifies the type of document. [See available doctypes](https://pugjs.org/language/doctype.html#doctype-option).\n\n### `self`\n\nType: `boolean` Default: `false`\u003cbr\u003e\nUse the `self` as namespace for the local variables in template. It will speed up the compilation, but for access to variable, e.g. `myVariable`, you must write `self.myVariable`.\n\n### `globals`\n\nType: `Array\u003cstring\u003e` Default: `[]`\u003cbr\u003e\nAdd a list of global names to make accessible in templates.\n\n### `filters`\n\nType: `object` Default: `undefined`\u003cbr\u003e\nFilters let to use other languages in Pug templates.\nYou can add your own [custom filters](https://pugjs.org/language/filters.html#custom-filters) to Pug.\nSee the [build-in filters](https://webdiscus.github.io/pug-loader/pug-filters).\n\n### `plugins`\n\nType: `Array\u003cObject\u003e` Default: `[]`\u003cbr\u003e\nPlugins allow to manipulate Pug tags, template content in compile process.\nHow it works [see in source of pug](https://github.com/pugjs/pug/blob/master/packages/pug/lib/index.js).\n\n### `compileDebug`\n\nType: `boolean` Default: `false`\u003cbr\u003e\nIncludes the function source in the compiled template to improve error reporting.\n\n### `pretty`\n\nType: `boolean` Default: `false`\u003cbr\u003e\nThis option is **deprecated** by pugjs and always is `false`. Don't use it.\n\n## Additional options\n\n### `mode`\n\n\u003e **Warning**\n\u003e \n\u003e Since the version `2.11.0`, the `method` option name is renamed into `mode`.\\\n\u003e The `method` option is **DEPRECATED**.\n\u003e \n\u003e The `method` values are renamed:\n\u003e - `pug-compile` =\u003e `compile`\n\u003e - `pug-render` =\u003e `render`\n\u003e \n\u003e The `method` option name and _old_ values can be used until the next major version.\n\nType: `string` Default: `compile`\u003cbr\u003e\nValues:\n- `compile` the Pug template compiles into a template function and in JavaScript can be called with variables to render into HTML at runtime. \\\n  The query parameter is `?compile`. Can be used if the mode is `render`. \\\n  Use this mode, if the template have variables passed from JavaScript at runtime. [see usage](#mode-compile)\n- `render` the Pug template renders into HTML at compile time and exported as a string.\n  All required resource will be processed by the webpack and separately included as added strings wrapped to a function. \\\n  The query parameter is `?render`. Can be used if the mode is `compile` or is not defined in options. \\\n  Use this mode, if the template does not have variables passed from JavaScript at runtime. The mode generates the most compact and fastest code. [see usage](#mode-render)\n- `html` the template renders into a pure HTML string at compile time. The mode need an addition loader to handles the HTML. \\\n  Use this mode if the rendered HTML needs to be processed by additional loader, e.g. by `html-loader` [see usage](#mode-html)\n\n\u003e Asset resources such as `img(src=require('./image.jpeg'))` are handled at compile time by the webpack using [**asset/resource**](https://webpack.js.org/guides/asset-modules/#resource-assets).\n\n### `esModule`\n\nType: `Boolean` Default: `false`\u003cbr\u003e\nEnable / disable ESM syntax in generated JS modules. \\\nValues:\n- `true` The `pug-loader` generates JS modules with the ESM syntax. \\\n  For example: `import html from 'template.pug';`. \\\n  For smaller and faster JS code, it is recommended to use this mode.\n- `false` defaults. The `pug-loader` generates JS modules with the CommonJS modules syntax. \\\n  For example, `const html = require('template.pug')`. \\\n  The default value is `false` for compatibility with the JS modules that is generated by the original pug-loader.\n\n\u003e **Note:**\n\u003e The option `esModule` is irrelevant for the `html` mode, because it returns a pure HTML string.\n\n💡 For generates smaller and faster template function, it is recommended to use following options:\n\n```js\n{\n  mode: 'render',\n  esModule: true,\n}\n```\n\n### `data`\n\nType: `Object` Default: `{}`\u003cbr\u003e\nThe custom data will be passed in all Pug templates, it can be useful by pass global data.\n\n\u003e ⚠️ Limitation with the `compile` mode.\\\n\u003e A string representing the source code of the function is limited by the `function.toString()`, see [examples](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString#examples). \\\n\u003e For native work of the function passed via the `data` loader option, use the `render` mode.\n\n### `embedFilters`\nType: `Object` Default: `undefined`\u003cbr\u003e\nEnable embedded Pug filters.\nTo enable a filter, add the following to the pug-loader options:\n```js\n{\n  embedFilters: {\n    \u003cFILTER_NAME\u003e : \u003cFILTER_OPTIONS\u003e | \u003cTRUE\u003e,\n  }\n}\n```\n\nWhere `\u003cFILTER_NAME\u003e` is the name of a built-in filter, the available filters see below.\nThe filter can have options `\u003cFILTER_OPTIONS\u003e` as an object.\nIf the filter has no options, use `true` as an option to enable the filter.\n\n\u003e See the complete information on the [pug filter](https://webdiscus.github.io/pug-loader/pug-filters/) site and in the [sources](https://github.com/webdiscus/pug-loader/tree/master/examples/pug-filters).\n\n### `watchFiles`\nType: `Array\u003cRegExp|string\u003e` Default: `[ /\\.(pug|jade|js.{0,2}|.?js|ts.?|md|txt)$/i ]`\u003cbr\u003e\nThis option allows you to configure watching of individual resolved dependencies.\\\nThe default value enables watching of Pug, scripts, markdown, etc. \nand ignores images, styles to avoid double processing via Webpack and via Pug's ist own compiler.\n\nIn some cases, you may want to use one SCSS file for styling \nand include another SCSS file with a Pug filter for code syntax highlighting.\nThe first SCSS file is watched via Webpack, but changes in the second will be ignored.\\\nFor example, we want to watch for changes in all source examples such as `main.c`, `colors.scss`, etc. from the `/code-samples/` folder, \nto do this, add to the `watchFiles` option:\n\n```js\n{\n  watchFiles: [\n    /\\\\/code-samples\\\\/.+$/,\n  ]\n}\n```\n\nFor watching of a file, add full path, for example:\n```js\n{\n  watchFiles: [\n    path.join(__dirname, './src/config.yml'),\n  ]\n}\n```\n\n\u003e **Note:**\n\u003e Default value of `watchFiles` will be extends, not overridden.\n\n---\n\n\u003ca id=\"mode-compile\" name=\"mode-compile\" href=\"#mode-compile\"\u003e\u003c/a\u003e\n## Using `compile` mode\n\nThis mode is used by default.\\\nIn JavaScript the required template will be compiled into template function.\\\nIn webpack config add to `module.rules`:\n\n```js\n{\n  test: /\\.pug$/,\n    loader: '@webdiscus/pug-loader',\n    options: {\n    mode: 'compile' // default mode `compile` can be omitted\n  }\n}\n```\nIn JavaScript, the result of require() is a template function. Call the template function with some variables to render it to HTML.\n```js\nconst tmpl = require('template.pug');\nconst html = tmpl({ key: 'value' }); // the HTML string\n```\n\nTo render the Pug direct into HTML, use the query parameter `?render`.\n\n```js\n// compile into template function, because loader option 'mode' defaults is 'compile'\nconst tmpl = require('template.pug');\nconst html = tmpl({ key: 'value' });\n\n// render the Pug file into HTML, using the parameter 'render'\nconst html2 = require('template2.pug?render');\n```\n\n\u003e **Note:**\n\u003e If the query parameter `render` is set, then will be used rendering for this template, independent of the loader option `mode`.\n\u003e Variables passed in template with mode `render` will be used at compile time.\n\n---\n\n\u003ca id=\"mode-render\" name=\"mode-render\" href=\"#mode-render\"\u003e\u003c/a\u003e\n## Using `render` mode\n\nThis mode will render the Pug into HTML at compile time. \\\nIn webpack config add to `module.rules`:\n\n```js\n{\n  test: /\\.pug$/,\n    loader: '@webdiscus/pug-loader',\n    options: {\n      mode: 'render',\n    },\n}\n```\n\nIn JavaScript the result of require() is an HTML string.\n\n```js\nconst html = require('template.pug'); // the HTML string\n```\n\nTo generate a template function for passing the data in Pug at realtime, use the query parameter `?compile`.\n\n```js\n// render into HTML, because loader option 'mode' is 'render'\nconst html = require('template.pug');\n\n// compile into template function, using the parameter 'compile'\nconst tmpl2 = require('template2.pug?compile');\nconst html2 = tmpl2({ ... });\n```\n\n---\n\n\u003ca id=\"mode-html\" name=\"mode-html\" href=\"#mode-html\"\u003e\u003c/a\u003e\n## Using `html` mode\n\nThis mode will render the Pug to pure HTML and should be used with an additional loader to handle HTML. \\\nIn webpack config add to `module.rules`:\n\n```js\n{\n  test: /\\.pug$/,\n    use: [\n    {\n      loader: 'html-loader',\n      options: {\n        esModule: false, // allow to use the require() for load a template in JavaScript\n      },\n    },\n    {\n      loader: '@webdiscus/pug-loader',\n      options: {\n        mode: 'html',\n      },\n    },\n  ],\n}\n```\n\nIn JavaScript the result of require() is an HTML string:\n\n```js\nconst html = require('template.pug'); // the HTML string\n```\n\n---\n\n\u003ca id=\"embed-filters\" name=\"embed-filters\" href=\"#embed-filters\"\u003e\u003c/a\u003e\n## Built-in filters\n\nThe goal of built-in filters is to use most useful lightweight filters without installation.\nThe built-in filters are [custom filters](https://pugjs.org/langucage/filters.html#custom-filters) that are collected in [one place](https://github.com/webdiscus/pug-loader/tree/master/src/filters).\nThese filters can be simply enabled via an option.\\\nSee the complete information on the [pug filter](https://webdiscus.github.io/pug-loader/pug-filters/) site and in the [sources](https://github.com/webdiscus/pug-loader/tree/master/examples/pug-filters).\n\nDefaults all built-in filters are disabled. Enable only filters used in your Pug templates.\n\n\u003ca id=\"filter-escape\" name=\"filter-escape\" href=\"#filter-escape\"\u003e\u003c/a\u003e\n### `:escape`\nThe filter replaces reserved HTML characters with their corresponding HTML entities to display these characters as text.\n\nFilter options: `none`.\n\nEnable the filter:\n\n```js\n{\n  test: /\\.pug$/,\n    loader: '@webdiscus/pug-loader',\n    options: {\n    // enable built-in filters\n    embedFilters: {\n      escape: true, // enable the :escape filter\n    },\n  },\n},\n```\n\nUsing the `:escape` filter in pug:\n\n```html\npre: code.language-html\n:escape\n\u003ch1\u003eHeader\u003c/h1\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cpre\u003e\n  \u003ccode class=\"language-html\"\u003e\n    \u0026lt;h1\u0026gt;Header\u0026lt;/h1\u0026gt;\n  \u003c/code\u003e\n\u003c/pre\u003e\n```\n\nInline syntax:\n```html\np.\nThe #[:escape \u003chtml\u003e] element is the root element.\u003cbr\u003e\nInside the #[:escape \u003chtml\u003e] element there is a #[:escape \u003cbody\u003e] element.\n```\n\nGenerated HTML:\n```html\n\u003cp\u003eThe \u0026lt;html\u0026gt; element is the root element.\u003cbr\u003e\n  Inside the \u0026lt;html\u0026gt; element there is a \u0026lt;body\u0026gt; element.\u003c/p\u003e\n```\n\n\u003e For more information and examples, see the [:escape](https://webdiscus.github.io/pug-loader/pug-filters/escape.html) site.\n\n\u003ca id=\"filter-code\" name=\"filter-code\" href=\"#filter-code\"\u003e\u003c/a\u003e\n### `:code`\nThe  filter wraps a content with the `\u003ccode\u003e` tag.\n\nFilter options:\n- `className {string}` The class name of the `code` tag. For example, the `prismjs` use the `language-*` as class name in `\u003ccode\u003e` for styling this tag.\n\nEnable the filter:\n\n```js\n{\n  test: /\\.pug$/,\n    loader: '@webdiscus/pug-loader',\n    options: {\n    // enable built-in filters\n    embedFilters: {\n      // enable the :code filter\n      code: {\n        className: 'language-', // class name of `\u003ccode\u003e` tag, needed for `prismjs` theme\n      },\n    },\n  },\n},\n```\n\nUsage examples:\n\nPug: `#[:code function() { return true }]`\\\nDisplay: `function() { return true }`\n\nPug: `#[:code:escape \u003cdiv\u003e]`\\\nDisplay: `\u003cdiv\u003e`\n\nPug: `#[:code:highlight(html) \u003cdiv class=\"container\"\u003econtent\u003c/div\u003e]`\\\nDisplay highlighted code: `\u003cdiv class=\"container\"\u003econtent\u003c/div\u003e`\n\n\u003e For more information and examples, see the [:code](https://webdiscus.github.io/pug-loader/pug-filters/code.html) site.\n\n\u003ca id=\"filter-highlight\" name=\"filter-highlight\" href=\"#filter-highlight\"\u003e\u003c/a\u003e\n### `:highlight`\nThe  filter highlights code syntax.\n\nFilter options:\n- `verbose {boolean}` Enable output process info in console.\n- `use {string}` The name of a highlighting npm module. The module must be installed. Currently, is supported the [prismjs](https://prismjs.com) only.\n\nEnable the filter:\n\n```js\n{\n  embedFilters: {\n    highlight: {\n      verbose: true,\n        use: 'prismjs',\n    },\n  },\n}\n```\n\nUsage example:\n```pug\npre.language-: code\n  :highlight(html)\n    \u003c!-- Comment --\u003e\n    \u003ch1\u003eHeader\u003c/h1\u003e\n    \u003cp\u003eText\u003c/p\u003e\n```\n\n\u003e For more information and examples, see the [:highlight](https://webdiscus.github.io/pug-loader/pug-filters/highlight.html) site.\n\n\u003ca id=\"filter-markdown\" name=\"filter-markdown\" href=\"#filter-markdown\"\u003e\u003c/a\u003e\n### `:markdown`\nThe filter transform markdown to HTML and highlights code syntax.\n\nThe `:markdown` filter require the [markdown-it](https://github.com/markdown-it/markdown-it) and [prismjs](https://prismjs.com) modules:\n```\nnpm install -D markdown-it prismjs\n```\n\nEnable the filter:\n```js\n{\n  test: /.pug$/,\n    loader: '@webdiscus/pug-loader',\n    options: {\n    // enable built-in filters\n    embedFilters: {\n      // enable :markdown filter\n      markdown: {\n        // enable highlighting in markdown\n        highlight: {\n          verbose: true,\n            use: 'prismjs',\n        },\n      },\n    },\n  },\n},\n```\n\nThe `highlight` options:\n\n- `verbose {boolean}` Enable output process info in console. Use it in development mode only. Defaults is false.\n- `use {string}` The name of a highlighting npm module. The module must be installed. Currently, is supported the [prismjs](https://prismjs.com) only.\n\nUsage example:\n```pug\n  :markdown\n    _HTML_\n    ```html\n    \u003c!-- Comment --\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003cp\u003eParagraph\u003c/p\u003e\n    \u003c/div\u003e\n    ```\n    _JavaScript_\n    ```js\n    const arr = [1, 2, 'banana'];\n    ```\n```\n\nDisplay highlighted code blocks:\n\n\u003e _HTML_\n\u003e ```html\n\u003e \u003c!-- Comment --\u003e\n\u003e \u003cdiv class=\"container\"\u003e\n\u003e   \u003cp\u003eParagraph\u003c/p\u003e\n\u003e \u003c/div\u003e\n\u003e ```\n\u003e _JavaScript_\n\u003e ```js\n\u003e const arr = [1, 2, 'banana'];\n\u003e ```\n\n\u003e For more information and examples, see the [:markdown](https://webdiscus.github.io/pug-loader/pug-filters/markdown.html) site.\n\n---\n\n\u003ca id=\"passing-data-into-template\" name=\"passing-data-into-template\" href=\"#passing-data-into-template\"\u003e\u003c/a\u003e\n## Passing data into template\n\n### In JavaScript\n\nBy default, the Pug file is compiled as template function, into which can be passed an object with template variables.\n\n```js\nconst tmpl = require('template.pug');\nconst html = tmpl({\n  myVar: 'value',\n  foo: 'bar'\n});\n```\n\nBut how pass variables in template which is rendered into HTML?\\\nVariables can be passed with query parameters.\n\n```js\nconst html = require('template.pug?myVar=value\u0026foo=bar');\n```\n\nor as a JSON object:\n\n```js\nconst html = require('template.pug?' + JSON.stringify({ myVar: 'value', foo: 'bar' }));\n```\n\nUse variables `myVar` and `foo` in Pug template.\n\n```pug\ndiv The value of \"myVar\": #{myVar}\ndiv The value of \"foo\": #{foo}\n```\n\n\u003e Usage of query parameters is legal and [official documented](https://webpack.js.org/api/loaders/#thisresourcequery) feature of webpack loader.\n\n\n### In webpack.config.js\n\nPass `myData` object via query.\n\n```js\nentry: {\n  about: './src/pages/about.pug?myData=' + JSON.stringify({ title: 'About', options: { uuid: 'abc123' } })\n}\n```\n\nUse the object `myData` in Pug template.\n\n```pug\nhtml\nhead\n  title= myData.title\nbody\n  div UUID: #{myData.options.uuid}\n```\n\nTo pass global data to all Pug templates, add the loader options `data` as any object.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        loader: '@webdiscus/pug-loader',\n        options: {\n          data: {\n            htmlLang: 'en-EN',\n            getKeywords: () =\u003e {\n              const keywords = ['webpack', 'pug', 'loader'];\n              return keywords.join(',');\n            }\n          }\n        }\n      },\n    ],\n  },\n};\n```\n\nUse the custom data and function in pug.\n\n```pug\nhtml(lang=htmlLang)\nhead\n  meta(name=\"keywords\" content=getKeywords())\nbody\n```\n\n### Passing data in HtmlWebpackPlugin\n\nThe user data can be passed into Pug template with two ways:\n\n- via HtmlWebpackPlugin options\n- via query parameters of template file\n\n```js\nmodule.exports = {\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: 'The some page', // avaliable in Pug as `htmlWebpackPlugin.options.title`\n      template: path.join(__dirname, 'src/index.pug?' + JSON.stringify({ myVar: 'value' })), // avaliable as `myVar`\n      filename: 'index.html',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        loader: '@webdiscus/pug-loader',\n      },\n    ],\n  },\n};\n```\n\nUse the passed variables `htmlWebpackPlugin.options` and `myVar` in Pug template:\n\n```pug\nhtml\n  head\n    title= htmlWebpackPlugin.options.title\n  body\n    div= myVar\n```\n\n### Load a static data in the pug\n\nYou can load data directly in pug.\\\n**data.json**\n\n```json\n[\n  { \"id\": 1, \"name\": \"abc\" },\n  { \"id\": 2, \"name\": \"xyz\" }\n]\n```\n\nRequire the JSON file in pug.\n\n```pug\n- var myData = require('./data.json')\neach item in myData\n  div #{item.id} #{item.name}\n```\n\n---\n\n\u003ca id=\"using-resources\" name=\"using-resources\" href=\"#using-resources\"\u003e\u003c/a\u003e\n## Using resources\n\nTo handle resources in Pug use the `require()` function:\n\n```pug\nimg(src=require('./path/to/images/logo.png'))\n```\n\nFor images, add the following rule to the webpack module:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpg|jpeg|svg|ico)/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'assets/images/[name].[hash:8][ext]',\n        },\n      },\n    ]\n  },\n};\n```\n\nFor fonts, add the following rule to the webpack module:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(woff2|woff|ttf|svg|eot)/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'assets/fonts/[name][ext]',\n        },\n      },\n    ]\n  },\n};\n```\n\nMore information about asset-modules [see here](https://webpack.js.org/guides/asset-modules/).\n\nExample of dynamic interpolation of image src in pug:\n\n```pug\n- files = ['image1.jpeg', 'image2.jpeg', 'image3.jpeg']\neach file in files\n  img(src=require(`./path/to/${file})`)\n```\n\n\u003ca id=\"resolve-resource-path\" name=\"resolve-resource-path\" href=\"#resolve-resource-path\"\u003e\u003c/a\u003e\n## Path Resolving\n\n\u003ca id=\"resolve-webpack-alias\" name=\"resolve-webpack-alias\" href=\"#resolve-webpack-alias\"\u003e\u003c/a\u003e\n### Path aliases with Webpack\n\nRecommended to use the Webpack alias to avoid relative paths in Pug.\\\nFor example, use the alias `Images` as path to images:\n```js\nmodule.exports = {\n  resolve: {\n    alias: {\n      Images: path.join(__dirname, 'src/assets/images/'),\n    },\n  }\n};\n```\n\nThe alias may be used with prefixes `~` or `@`.\\\nFor example, all following aliases resolves the same path:\n```pug\nimg(src=require('Images/logo.png'))\nimg(src=require('~Images/logo.png'))\nimg(src=require('@Images/logo.png'))\n```\n\n\u003ca id=\"resolve-tsconfig-alias\" name=\"resolve-tsconfig-alias\" href=\"#resolve-tsconfig-alias\"\u003e\u003c/a\u003e\n### Path aliases with TypeScript\n\nUsing `TypeScript` you can define an alias in `tsconfig.json`.\nBut for performance is recommended to use the Webpack alias.\\\nFor example, add to `tsconfig.json` an alias to the `paths` option:\n\n**tsconfig.json**\n\n```js \n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"Images/*\": [\"assets/images/*\"]\n    }\n  }\n}\n```\n\n\u003e **Warning**\n\u003e\n\u003e The `compile` mode can resolve the filename as a string only and the filename can't be interpolated.\n\u003e ```pug\n\u003e img(src=require('Images/logo.png')) // It works.\n\u003e \n\u003e - const file = 'logo.png'\n\u003e img(src=require('Images/' + file))  // ERROR: Can't be resolved with 'compile' mode. \n\u003e ```\n\n\u003ca id=\"resolve-webpack-context\" name=\"resolve-webpack-context\" href=\"#resolve-webpack-context\"\u003e\u003c/a\u003e\n### Root path with Webpack context\n\nYou can use the Webpack `context` for a short path in Pug.\\\nDefine in Webpack config the `context` as path to sources:\n```js\nmodule.exports = {\n  context: path.resolve(__dirname, 'src'),\n};\n```\n\nFor example, your images are under the path `PROJECT_PATH/src/assets/images/`, \nthen using the `context` you can use the root path (relative by context) anywhere:\n```pug\nimg(src=require('/assets/images/logo.png'))\n```\n\n\u003e **Note**\n\u003e \n\u003e You can use the `basedir` option of pug-loader for same effect:\n\u003e ```js\n\u003e module.exports = {\n\u003e   module: {\n\u003e     rules: [\n\u003e       {\n\u003e         test: /\\.pug$/,\n\u003e         loader: '@webdiscus/pug-loader',\n\u003e         options: {\n\u003e           basedir: path.resolve(__dirname, 'src')\n\u003e         },\n\u003e       },\n\u003e     ],\n\u003e    },\n\u003e  };\n\u003e ```\n\n\u003ca id=\"resolve-relative-path\" name=\"resolve-relative-path\" href=\"#resolve-relative-path\"\u003e\u003c/a\u003e\n### Relative path\nThe file in the current- or subdirectory `MUST` start with `./`:\n\n```pug\nimg(src=require('./path/to/logo.png'))\n```\n\nThe file in the parent directory `MUST` start with `../`:\n\n```pug \nimg(src=require('../images/logo.png'))\n```\n\n\u003e **Warning**\n\u003e\n\u003e Following relative path will be resolved with `render` and `html` modes, but `NOT` with `compile` mode:\n\u003e ```pug \n\u003e   img(src=require('../../images/logo.png'))\n\u003e ```\n\u003e This is an interpolation limitation in Webpack.\n\n\u003ca id=\"resolve-interpolation\" name=\"resolve-interpolation\" href=\"#resolve-interpolation\"\u003e\u003c/a\u003e\n### Interpolation\n\nYou can use the filename as a variable.\n\nUsage examples work with all modes:\n```pug\n- const file = 'logo.png'\nimg(src=require('./images/' + file))\nimg(src=require(`./images/${file}`))\nimg(src=require('../images/' + file))\nimg(src=require('Images/' + file)) // 'Images' is webpack alias\nimg(src=require(`Images/${file}`)\n```\n\n\u003e **Warning**\n\u003e\n\u003e Limitation using the `compile` mode:\\\n\u003e the variable `MUST NOT` contain a path, only a filename, because is interpolated at compile time.\\\n\u003e For example, the 'compile' mode can't resolve following:\n\u003e ```pug\n\u003e   - var file = '../images/logo.png'\n\u003e   img(src=require(file))\n\u003e ```\n\nUsing a variable with `render` or `html` mode, the variable `MAY` contain a path, because is resolved at runtime.\\\nFollowing example work only with `render` or `html` mode:\n```pug\n- const file = '../relative/path/to/logo.png'\nimg(src=require(file))\nimg(src=require('Images/' + file))\n```\n\nIn current directory, the filename `MUST` start with `./`:\n\n```pug\n- const file = './logo.png'\nimg(src=require(file))\n```\n\n---\n\n\u003ca id=\"using-with-angular\" name=\"using-with-angular\" href=\"#using-with-angular\"\u003e\u003c/a\u003e\n## Using with Angular\n\nInstall:\n\n```\nnpm i --save-dev @webdiscus/pug-loader pug-plugin-ng\n```\n\u003e In pug-loader can be used the optional [**pug-plugin-ng**](https://www.npmjs.com/package/pug-plugin-ng)\n\u003e to allow unquoted syntax of Angular: `[(bananabox)]=\"val\"`\n\nCreate the file `webpack.config.js` in root directory of angular project:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        loader: '@webdiscus/pug-loader',\n        options: {\n          mode: 'render',\n          doctype: 'html',\n          plugins: [require('pug-plugin-ng')],\n        },\n      },\n    ],\n  },\n};\n```\n\nBind the file `webpack.config.js` in the Angular config `angular.json`:\n```js\n{\n  // ...\n  \"projects\": {\n    // ...\n    \"architect\": {\n      \"build\": {\n        // replace architect.build.builder with this value:\n        \"builder\": \"@angular-builders/custom-webpack:browser\",\n          // add the options:\n          \"options\": {\n          \"aot\": true,\n            \"customWebpackConfig\": {\n            \"path\": \"./webpack.config.js\" // the path to webpack.config.js\n          },\n          // ...\n        },\n        // ...\n      },\n      \"serve\": {\n        // replace architect.serve.builder with this value:\n        \"builder\": \"@angular-builders/custom-webpack:dev-server\",\n          \"options\": {\n          \"browserTarget\": \"\u003capp-name\u003e:build\"\n        },\n        // ...\n      },\n      // ...\n    },\n  },\n},\n```\n\nIn a component file, e.g. `./src/app/app.component.ts` set the `templateUrl` with Pug file:\n```js\nimport { Component } from '@angular/core';\n\n// the variable `description` will be passed into Pug template via resource query\nconst templateVars = '{\"description\": \"Use Pug template with Angular.\"}';\n\n@Component({\n  selector: 'app-root',\n  styleUrls: ['./app.component.css'],\n  templateUrl: './app.component.pug?' + templateVars,\n})\nexport class AppComponent {\n  title = 'ng-app';\n}\n```\n\nCreate a Pug template, e.g. `./src/app/app.component.pug`:\n\n```pug\nh1 Hello Pug!\np Description: #{description}\n```\n\nSee the complete [source](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component/) of the example.\n\n---\n\n\u003ca id=\"using-with-vue\" name=\"using-with-vue\" href=\"#using-with-vue\"\u003e\u003c/a\u003e\n## Using with Vue\n\nInstall:\n\n```\nnpm i --save-dev @webdiscus/pug-loader\n```\n\nChange your `vue.config.js` according to the following minimal configuration:\n```js\nconst { defineConfig } = require('@vue/cli-service');\n\n// additional pug-loader options, \n// e.g. to enable pug filters such as `:highlight`, `:markdown`, etc.\n// see https://github.com/webdiscus/pug-loader#options\nconst pugLoaderOptions = {\n};\n\nmodule.exports = defineConfig({\n  transpileDependencies: true,\n\n  chainWebpack: (config) =\u003e {\n    // clear all existing pug loaders\n    const pugRule = config.module.rule('pug');\n    pugRule.uses.clear();\n    pugRule.oneOfs.clear();\n\n    // exclude `pug-loader` from the witchery of the baggy `thread-loader` that is used in production mode\n    const jsRule = config.module.rule('js');\n    jsRule.exclude.add(/pug-loader/);\n  },\n\n  configureWebpack: {\n    module: {\n      rules: [\n        {\n          test: /\\.pug$/,\n          oneOf: [\n            // allow \u003ctemplate lang=\"pug\"\u003e in Vue components\n            {\n              resourceQuery: /^\\?vue/u,\n              loader: '@webdiscus/pug-loader',\n              options: {\n                mode: 'html', // render Pug into pure HTML string\n                ...pugLoaderOptions,\n              },\n            },\n            // allow import of Pug in JavaScript\n            {\n              loader: '@webdiscus/pug-loader',\n              options: {\n                mode: 'compile', // compile Pug into template function\n                ...pugLoaderOptions,\n              },\n            },\n          ],\n        },\n      ],\n    },\n  },\n});\n```\n\nFor additional information see please the discussion:\n[How to configure the plugin for both Vue and non-Vue usage?](https://github.com/webdiscus/pug-loader/discussions/16)\n\n\n**Using Pug in Vue template**\n\n```html\n\u003ctemplate lang='pug'\u003e\n  h1 Hello Pug!\n  p Use the '@webdiscus/pug-loader'\n\u003c/template\u003e\n```\n\u003e **Note**\n\u003e \n\u003e You can use an indent for Pug code in Vue template.\n\n**Using Pug in JavaScript**\n\nApp.vue\n```html\n\u003ctemplate\u003e\n  \u003cdiv v-html='demo'\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // import Pug as template function\n  import demoTmpl from './views/demo.pug';\n  \n  // define custom data used in Pug template\n  const locals = { colors: ['red', 'green', 'blue'] };\n  // pass custom data in Pug template\n  const demoHtml = demoTmpl(locals);\n\n  export default {\n    name: 'App',\n    data() {\n      return {\n        demo: demoHtml\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\ndemo.pug\n```pug\neach color in colors\n  div(style=`color: ${color}`) #{color}\n```\n\n\u003e **Note:**\n\u003e The `colors` is external variable passed from App.vue.\n\n---\n\n\u003ca id=\"recipes\" name=\"recipes\" href=\"#recipes\"\u003e\u003c/a\u003e\n## Recipes\n\n### Resolving the attribute `srcset` in `img` tag\n```pug\nimg(srcset=`${require('./image1.jpeg')} 320w, ${require('./image2.jpeg')} 640w` src=require('./image.jpeg'))\n```\n\noutput\n```html\n\u003cimg srcset=\"/assets/image1.f78b30f4.jpeg 320w, /assets/image2.f78b30f4.jpeg 640w\" src=\"/assets/image.f78b30f4.jpeg\"\u003e\n```\n\n### Using JavaScript in Pug\n\nUse the `require()` for CommonJS files in Pug templates. \\\nThe JS module **say-hello.js**\n\n```js\nmodule.exports = function(name) {\n  return `Hello ${name}!`;\n}\n```\n\nUse the module `sayHello` in Pug template.\n\n```pug\n- var sayHello = require('./say-hello')\nh1 #{sayHello('pug')}\n```\n\n---\n\n## Testing\n\n`npm run test` will run the unit and integration tests.\\\n`npm run test:coverage` will run the tests with coverage.\n\n---\n\n## Also See\n\n- more examples of usages see in [test cases](https://github.com/webdiscus/pug-loader/tree/master/test/cases)\n- [ansis][ansis] - ANSI color styling of text in terminal\n- [pug GitHub][pug]\n- [pug API Reference][pug-api]\n- [pug-plugin][pug-plugin]\n- [Pug filters]\n- [html-bundler-webpack-plugin][html-bundler-webpack-plugin] - The plugin handles HTML template as entry point, extracts CSS, JS, images from their sources loaded directly in HTML\n\n\n## License\n\n[ISC](https://github.com/webdiscus/pug-loader/blob/master/LICENSE)\n\n[ansis]: https://github.com/webdiscus/ansis\n[pug]: https://github.com/pugjs/pug\n[pug-api]: https://pugjs.org/api/reference.html\n[pug-plugin]: https://github.com/webdiscus/pug-plugin\n[pug-loader issue]: https://github.com/pugjs/pug-loader/issues/123\n\n[Pug filters]: https://webdiscus.github.io/pug-loader/pug-filters\n[`:escape`]: https://webdiscus.github.io/pug-loader/pug-filters/escape.html\n[`:code`]: https://webdiscus.github.io/pug-loader/pug-filters/code.html\n[`:highlight`]: https://webdiscus.github.io/pug-loader/pug-filters/highlight.html\n[`:markdown`]: https://webdiscus.github.io/pug-loader/pug-filters/markdown.html\n\n[html-bundler-webpack-plugin]: https://github.com/webdiscus/html-bundler-webpack-plugin\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fpug-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdiscus%2Fpug-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fpug-loader/lists"}