Pug Indentation warning in Nuxt project

Question

After updating Nuxt, the pug pre-processor start giving a warning in all of the project files.

unexpected token "indent" (PUG:INVALID_TOKEN) [2,1]

This is because the pug code starts with one indentation from Template.

<template lang="pug">
    h1 Title
</template>

This will not show the warning anymore:

<template lang="pug">
h1 Title
</template>

How can I config Pug so it doesn't show this warning and keep the files with the code indentation?

Thank you for any help.

Answer 1

The @webdiscus/pug-loader allow using an indent in Vue template:

<template lang="pug">
    h1 Title
</template>

Install

npm i --save-dev @webdiscus/pug-loader

Change your vue.config.js according to the following minimal configuration:

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,

  chainWebpack: (config) => {
    const pugRule = config.module.rule('pug');

    // clear all existing pug loaders
    pugRule.uses.clear();
    pugRule.oneOfs.clear();
  },

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.pug$/,
          oneOf: [
            // allow import of Pug in JavaScript
            {
              exclude: /\.vue$/,
              loader: '@webdiscus/pug-loader',
              options: {
                method: 'compile', // compile Pug into template function
              },
            },
            // allow <template lang="pug"> in Vue components
            {
              loader: '@webdiscus/pug-loader',
              options: {
                method: 'html', // render Pug into pure HTML string
              },
            },
          ],
        },
      ],
    },
  },
});