webpack loader that transforms pug templates to plain HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit d2bc7c4 Mar 25, 2018
Permalink
Failed to load latest commit information.
.gitignore init Mar 25, 2018
LICENSE init Mar 25, 2018
README.md doctype note Mar 25, 2018
index.js init Mar 25, 2018
package.json init Mar 25, 2018
yarn.lock init Mar 25, 2018

README.md

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:

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 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:

{
  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:

{
  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.

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.