Unexpected token "indent" on Vue 3 template

[yst138451]

Vue version: 3.0.1

Related issue: vuejs/rollup-plugin-vue#86

With the default indentation style of 2 spaces on templates, I'm getting the following issue:

    1|
  > 2|   div(:class="styleClasses")
-------^
    3|     span(
    4|       contenteditable
    5|       ref="textField"

unexpected token "indent"

This doesn't seem to happen on version 2 though.

--

Possible solution #17

[xxSkyy]

Same problem, cant use beautifier due of this. Should be fixed as vue3 coming fast to get as daily.

[ilyavaiser]

When can this be fixed?

[guillaumebriday]

Hey 👋 @yyx990803 Could you take a look at this issue please? Pug users cannot upgrade to Vue 3 with this bug :/

Thank you!

[xxSkyy]

The solution are pretty simple, if using VSCode switch to Volar plugin and it's formatter. Honestly I forgot about this problem since.

Also I recommend migrating from Webpack to Vite

[doutatsu]

I've wanted to update to Vue 3, but the issue of indentation makes it really hard. I understand that not indenting is more performant for the source maps, but I'd like to keep indenting if possible. Any solutions for this?

[linhntaim]

I found a temporary solution for it: Not put the indent at the first line in template and it works well.

[Karinemoreira]

I found a temporary solution for it: Not put the indent at the first line in template and it works well.

Thank u! It works.

[infostatus]

Is there already a solution to keep the indentation?
Some option that we can configure Pug so this warning doesn't show?

[doutatsu]

@infostatus Not that I am aware - I had to cave in and just go with the indentation

[ColtHands]

This is a problem with the actual pug compiler since root components can't start with an indent.

[TokugawaTakeshi]

Vue 3.X is in "latest" channel now while this problem still unsolved.
Just checked with newest packages.

I did not understand what it is the actual cause of this problem. Pug? Vue3? @vue/compiler-sfc? Webpack? vue-loader?

[ColtHands]

@TokugawaTakeshi it's a problem with vue3, compiler and Pug all together and not actually a problem at all.

Vue 3 now adds indent token when you start your html template with an indent, pug on the other hand can't start with indent, it needs to start with a tag.

Imo it's not even a problem, just a code style change. Since and vue3 compiler and pug are both not wrong in this case.

[TokugawaTakeshi]

Because Mr. Guillaume Briday already tried to call mr. Evan You in fourth comment, I suppose it's meaningless to try this again.
Also, since the Vue is the open source project, we can't demand the fixes commandingly.

Which other options we have? Hire some freelancer ask him to create the pull request fixing this issue?
My acquaintance has created good pull request for the Vue2.X and it has been ignored, so I afraid it will happen again.

[webdiscus]

@TokugawaTakeshi you can use the @webdiscus/pug-loader.

This Pug loader supports for an indent (spaces and tabs) in Vue template:

<template lang='pug'>
    h1 Hello Pug!
    p Use the '@webdiscus/pug-loader'.
</template>

This Pug loader works with Vue 3. Here is source of usage example.
See please how to setup Pug loader.

[ColtHands]

@webdiscus what code changes have you made from original pug-loader to yours?