Как использовать Pug в Nuxt 3.x?

Question

Если мы создадим приложение Nuxt3 с помощью npx nuxi init nuxt3-app и изменить содержание app.vue от

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

к

      <template lang="pug">

  div
    NuxtWelcome

</template>

мы получим

       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

Я не ожидал встроенной поддержки Pug, но также нет подсказки, как ее обеспечить.

При настройке Nuxt3 по умолчанию AFAIK использует Vite вместо Webpack. Может быть, ответ в переопределении настройки Vite?

Answer 1

Для Вите:

1. Установите vite-plugin-pug. Vite определяет это автоматически.
2. Перезапустите сборку приложения

И будьте осторожны с этой ошибкой .

Answer 2

Я знаю, что прошло уже больше года с момента этого вопроса, но недавно у меня возник тот же вопрос, и я нашел более простое решение.

Вы можете просто установитьpugи это сработает. Нет необходимости в каких-либо плагинах или других дополнительных конфигурациях.

На всякий случай: я используюNuxt@3.6.5иPug@3.0.2

UPD: На самом деле нужна небольшая настройка. В основном для поддержки IDE. Вам также следует добавить@vue/language-plugin-pugи расширить свойtsconfig.jsonсvueCompilerOptionsкак показано ниже:

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