fix(compiler-sfc): remove first-line indent for pug or jade

[dev-itsheng]

See https://github.com/vuejs/vue-next/issues/3231 。

When we use template, we often need to use indentation to ensure the formatting and readability of the content, also includes pug / jade。

<template lang="pug">
    div hello
        span world
</template>

However, when the Vue SFC compiler preprocesses the template, it removes the outer tags and sends the contents directly to the template compiler, while the pug / jade compiler does not recognize indentation.

Correspondingly, Vue will also report an error：

I had to remove the indentation every time so that there were no spaces in front of the first line of content:

<template lang="pug">
div hello
    span world
</template>

After repeating this operation countless times, I realized that something should be done, maybe the logic of the compiler should be modified.

So I do that.

---

In addition, there is another detail. I don't know why Prettier's version is locked at 1.x, which makes it not aware of TypeScript's new syntax:

• https://github.com/vuejs/vue-next/blob/master/package.json#L69
• https://github.com/prettier/prettier/blob/f938ccdd22/package.json#L60

I had to change to another approach, which resulted in the definition of an additional variable.

[jincan39]

same problem, it's not friendly for migration

[doutatsu]

Bumping this up -> Can't migrate to Vue 3 due to this issue

[dev-itsheng]

Since I submitted this PR, no one has dealt with it for more than 5 months. I don't want to wait any longer and decide what to do on my own. So I do that, You can also try my loader named vue-template-pug-remove-indent-loader to solve this problem.

I wrote a bit hastily. I didn't even submit the git link, but I will improve it later. If you have any suggestions, please contact me directly.

[avramz]

Any update on this?

[dev-itsheng]

Any update on this?

I'm sorry it took so long to reply, it's been a year before I know it, and there is still no progress on this PR.

The following modifications may be made next:

1. Add Vite support (add PR for @vitejs/plugin-vue)
2. Added support for Volar (now using indentation will still report an error)
3. If the above two are not accepted, propose my own related solutions.

[Shinigami92]

As a workaround you could try https://github.com/prettier/plugin-pug and do not set pugSingleFileComponentIndentation to true / leave it just to the default. Then run prettier and your whole codebase is formatted and should be fixed.

[Venegrad]

How to fix that, i have same error today. Its complete project, what working 2 years, nad that problems goin only today in 1765 files, wow. How i can ifx that?

[kerch83]

How to fix that, i have same error today. Its complete project, what working 2 years, nad that problems goin only today in 1765 files, wow. How i can ifx that?

i have same problem 2 days ago( are you fix it?

[dev-itsheng]

How to fix that, i have same error today. Its complete project, what working 2 years, nad that problems goin only today in 1765 files, wow. How i can ifx that?

i have same problem 2 days ago( are you fix it?

I'm sorry, I haven't had time to deal with this issue because I've been too busy recently, but as the author of this PR, seeing more and more similar issues below, I still think I should know where your problems are, so that you can provide the following information? ?

• Use Vite or vue-cli?
• What are other configurations and scenarios?

If it is based on webpack, I have a reply above, you can refer to my vue-template-pug-remove-indent-loader This package, due to the review of Gitee (currently unable to view the repo), I will migrate it to GitHub as soon as possible, and the solution for Vite will come out as soon as possible.

Please wait. Until there is no official solution (it's been over a year and my PR still hasn't been merged) by Vue.js team, I'll try my best to help you solve the problem.

[greabock]

Cant migrate my project too. Any update on this?

[RobyCigar]

idk, this pug indentation thing works on webpack, but not with vite, so i should remove the indent manually, I wonder how webpack team solve this issue

[fvena-portfolio]

Any update on this?

[tayursky]

Pug does not work with vite... Great...

[rudolfbyker]

I made a minimal reproduction repository for the problem: https://github.com/rudolfbyker/vue-pug-indent-reproduction and a new PR: https://github.com/vuejs/core/pull/7723

[SirMishaa]

Having the same issue when migrating a project from Vue 2 to Vue 3.

The PR seems ready, does something prevent it from being merged ?

Regards

[yyx990803]

See 634519720