Pug templates allowed in Quasar2 app scaffolded with Quasar CLI with option Vite?

[JacquesRobin]

Hi,

I am trying to use Pug as template language in the Quasar2/Vue3 scaffolded by the Quasar CLI with the Vite option.

In the IndexPage.vue component, I just changed:

<template>
  <q-page class="flex flex-center">
     <b3> Hello from Counters! <\b3>
  </q-page>
</template>

with

<template lang="pug">
q-page.flex
  b3 Hello from Counters!
</template>

and I get what looks like a transpiler pipeline error below.

In order to use Pug in templates must I revert to using webpack to build the Quasar2/Vue3 app?

(node:6364) UnhandledPromiseRejectionWarning: Error: Cannot find module 'pug'
Require stack:
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\vue\compiler-sfc\index.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@vitejs\plugin-vue\dist\index.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@quasar\app-vite\lib\config-tools.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@quasar\app-vite\lib\modes\spa\spa-config.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@quasar\app-vite\lib\modes\spa\spa-devserver.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@quasar\app-vite\lib\cmd\dev.js
- C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@quasar\app-vite\bin\quasar
- C:\Users\robinadmin\AppData\Roaming\npm\node_modules\@quasar\cli\bin\quasar
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1495:5
    at new Promise (<anonymous>)
    at promisify (C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1488:10)    at Function.exports.pug.render (C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:2358:10)    at preprocess (C:\Users\robinadmin\Documents\Teaching\Universal\Counters\Volatile\QuasarPugJs\quasar-pug-js-counters-starter-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:3150:18)
(Use `node --trace-warnings ...` to show where the warning was created)(node:6364) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)(node:6364) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[yusufkandemir]

This is not related to Quasar. Pug is not a Quasar CLI feature, that wasn't the case with Webpack either. But, you can easily add it by running npm i -D pug/yarn add -D pug as written here.

[JacquesRobin]

It worked! Thanks a lot for the clarification!