Как исправить unexpected token «indent» при использовании pug во vue?

Question

[ravshan selimov]

Всем привет.
Использую pug(vue-cli-plugin-vue) в проекте на vue3.
Когда делаю так

<template lang="pug">
  .app-container
    preloader(v-if="loading" type="preloader")
    router-view
</template>

Выдаётся ошибка `unexpected token "indent"`
Проблема в том что стоит табуляция на корневом DOM элементе vue шаблона

Если убрать табуляцию всё работает

<template lang="pug">
.app-container
  preloader(v-if="loading" type="preloader")
  router-view
</template>

Как можно исправить, гуглил ничего не нашёл, видел issues на гитхабе ничего толкового

Comments

[Lord_Dantes]

Пробелы не допускают в pug, только табуляция. А вообще читайте доки плагина который подключили.

[ravshan selimov]

Lord_Dantes, Проблема не в этом а в том что стоит табуляция на корневом DOM элементе vue шаблона

Answer 1

[Dungeon Keeper]

Вы можете попробовать @webdiscus/pug-loader, он позволяет использовать отступ в темплейте:

<template lang="pug">
    .app-container
        h1 Hello Pug!
</template>

Установить Pug loader:
npm i --save-dev @webdiscus/pug-loader

Изменить "vue.config.js" согласно следующему конфигу:

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
              },
            },
          ],
        },
      ],
    },
  },
});