pug-plain-loader

KO | EN

gitlite — search

#javascript #python #go #android #rust #docker #macos #awesome #cli #kubernetes #vue #pytorch #ios #open-source

pug-plain-loader

(★ 121)

webpack loader that transforms pug templates to plain HTML

File Explorer

Download Latest Version (.zip)

.gitignore
index.js
LICENSE
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# pug-plain-loader

A loader that simply compiles pug templates into HTML.

## Installation

Note `pug` is a peer dependency, so make sure to install both:

``` sh
npm install -D pug-plain-loader pug
```

## Usage

This loader is mostly intended to be used alongside `vue-loader` v15+, since it now requires using webpack loaders to handle template preprocessors. There's also [`pug-html-loader`](https://github.com/willyelm/pug-html-loader) which unfortunately is out-of-date and not actively maintained.

If you are only using this loader for templating in single-file Vue components, simply configure it with:

``` js
{
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      }
    ]
  }
}
```

This will apply this loader to all `<template lang="pug">` blocks in your Vue components.

If you also intend to use it to import `.pug` files as HTML strings in JavaScript, you will need to chain `raw-loader` after this loader. Note however adding `raw-loader` would break the output for Vue components, so you need to have two rules, one of them excluding Vue components:

``` js
{
  module: {
    rules: [
      {
        test: /\.pug$/,
        oneOf: [
          // this applies to pug imports inside JavaScript
          {
            exclude: /\.vue$/,
            use: ['raw-loader', 'pug-plain-loader']
          },
          // this applies to <template lang="pug"> in Vue components
          {
            use: ['pug-plain-loader']
          }
        ]
      }
    ]
  }
}
```

## Options

See [Pug compiler options](https://pugjs.org/api/reference.html#options).

The `doctype` option is set to `html` by default, since most Vue templates are HTML fragments without explicit doctype.

An additional option `data` can be used to pass locals for the template, although this is typically not recommended when using in Vue components.

pug-plain-loader

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

pug-plain-loader

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README