title: Adding pug-plain-loader configuration in vue.config.js
body: <p>I have a project created through <a href="https://cli.vuejs.org/" rel="nofollow noreferrer">Vue CLI</a> and now I want to use <a href="https://pugjs.org/" rel="nofollow noreferrer">Pug</a> with my <a href="https://v2.vuejs.org/v2/guide/single-file-components.html" rel="nofollow noreferrer">Single File Components</a> i.e. the <code>.vue</code> files.</p>
  <p>To do that I started following this <a href="https://vue-loader.vuejs.org/guide/pre-processors.html#pug" rel="nofollow noreferrer">vue-loader documentation</a> and installed <code>pug</code> and <code>pug-plain-loader</code> with the command <code>npm install -D pug pug-plain-loader</code>. And the next step there proposes inserting the follows in <code>webpack.config.js</code></p>
  <pre class="lang-js prettyprint-override"><code>// webpack.config.js -&gt; module.rules
  {
    test: /\.pug$/,
    loader: 'pug-plain-loader'
  }
  </code></pre>
  <p>But, using Vue CLI, I do not have an explicit webpack config file, but <code>vue.config.js</code>.</p>
  <p>So, how to add such a <code>pug-plain-loader</code> configuration in <code>vue.config.js</code> (preferably using <a href="https://cli.vuejs.org/guide/webpack.html#chaining-advanced" rel="nofollow noreferrer">webpack-chain</a>)?</p>
  <p>My current <code>vue.config.js</code> already featuring a <code>svg-loader</code> is as follows:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    // ...
    chainWebpack: (config) =&gt; {
      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
    }
  }
  </code></pre>