Adding pug-plain-loader configuration in vue.config.js

Question

I have a project created through Vue CLI and now I want to use Pug with my Single File Components i.e. the .vue files.

To do that I started following this vue-loader documentation and installed pug and pug-plain-loader with the command npm install -D pug pug-plain-loader. And the next step there proposes inserting the follows in webpack.config.js

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

But, using Vue CLI, I do not have an explicit webpack config file, but vue.config.js.

So, how to add such a pug-plain-loader configuration in vue.config.js (preferably using webpack-chain)?

My current vue.config.js already featuring a svg-loader is as follows:

module.exports = {
  // ...
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')

    //TODO: add pug-plain-loader configuration here
  }
}

Nunciata

Answer 1

Accordingly with the example here, Vue CLI has it own way to define new rules in webpack. So this code seems to be the right way to define the pug loader (in your vue.config.js file - if doesn't exists, create it):

    module.exports = {
      chainWebpack: (config) => {
        // Pug Loader
        config.module
          .rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end();
      },
    };

This worked for me c:

(this apply only in .vue files that have lang="pug" specified in template tag)

Rectum

works perfect 👏 put that in the vue.config.js and run npm i -D pug pug-plain-loader and it all works, just use <template lang="pug">, easy to convert from original html with html2jade.org (only hindrance is that <selfclosed-tags /> break it), works perfectly with vue logic – Downtrodden