Using lang="pug" with Quasar CLI

Question

I've started a brand new Quasar CLI project and I'd like to use Pug in the way I'm used to doing: incorporating a lang="pug" tag in some of my .vue files:

<template lang="pug">
  q-page(class="flex flex-center")
    p Well hello there
...

This throws this error:

Component template requires a root element, rather than just text

The advice given by Quasar is to add this configuration:

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    })
  }
}

But that presupposes that all my pug files are in files called .pug, which isn't my preference.

Is there a way to have lang="pug" work like normally in my vue-cli projects?

Quasar CLI........ v0.17.24

Quasar Framework.. v0.17.20

Answer 1

This should work as it is. I have set up a new quasar project and added pug to the webpack rules like so

extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
        cfg.module.rules.push({
          test: /\.pug$/,
          loader: 'pug-plain-loader'
        })
      }

My app.vue looks like this

<template lang="pug">
  div(id="q-app")
    router-view
</template>

And everything works. Im using quasar 1.0 beta and its the default project format created when you create using the CLI.

Answer 2

In my case Ben solution didn't work: what I figured out was to setup that block as follows, in the quasar.conf.js file:

  extendWebpack (cfg) {
    cfg.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /node_modules/
    })

  },

  chainWebpack (chain) {
    chain.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
  }

With that, I just require to add the atribute lang="pug" in any template where I use the pug syntax.

Ben's solution triggered me a lot of errors with existing Vue files, and js files.