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

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)