Install

npm install pug-plain-loader

yarn add pug-plain-loader

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']
          }
        ]
      }
    ]
  }
}