How to use Pug in Nuxt 3.x?

Question

If we create the Nuxt 3 application by npx nuxi init nuxt3-app and change the content of app.vue from

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

to

<template lang="pug">

  div
    NuxtWelcome

</template>

we'll get

 ERROR  [unhandledRejection] Cannot find module 'pug'                                                                                                                                                                                                      17:05:54
Require stack:
- D:\IntelliJ IDEA\Experiments\nuxt3-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js
- D:\IntelliJ IDEA\Experiments\nuxt3-app\node_modules\vue\compiler-sfc\index.js
- D:\IntelliJ IDEA\Experiments\nuxt3-app\node_modules\@vitejs\plugin-vue\dist\index.js

I did not expected the build-in Pug support but there is also no hint how to provide.

AFAIK default Nuxt 3 setup use the Vite istead of Webpack. Maybe the answer is in Vite setup overriding?

Answer 1

I know it's been over a year since this question, but I recently had the same question and found an easier solution.

You can just install pug and it will work. No need for any plugins or other extra configs.

Just in case: I am using Nuxt@3.6.5 and Pug@3.0.2

UPD: There is actually a need for a little bit of config. Mainly for IDE support. You should also add @vue/language-plugin-pug and extend your tsconfig.json with vueCompilerOptions like it shown below:

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
}

Answer 2

For Vite:

1. Install vite-plugin-pug. Vite detects it automatically.
2. Restart the application building

And be careful with this bug.