pug-plain-loader: Unexpected token "indent" on Vue 3 template

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

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

Is this problem resolved ?

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.

@avinmaster

According my newest information, in Vue 3 - no. Current workaround is @webdiscus/pug-loader.

If resolved, I am sorry at advance.

Note that for some of you, coming from a search engine, as for me, this error might not be related to this repo! This is the stack trace I got with nuxt3 + vue3 + pug and an SFC component, with the contents of <template lang="pug> being indented:

unexpected token "indent"
  Plugin: vite:vue
  File: …/pages/index.vue
      at makeError (…/node_modules/pug-error/index.js:34:13)
      at Parser.error (…/node_modules/pug-parser/index.js:56:15)
      at Parser.parseExpr (…/node_modules/pug-parser/index.js:280:14)
      at Parser.parse (…/node_modules/pug-parser/index.js:115:25)
      at parse (…/node_modules/pug-parser/index.js:12:20)
      at Object.parse (…/node_modules/pug/lib/index.js:137:11)
      at Function.loadString [as string] (…/node_modules/pug-load/index.js:54:21)
      at compileBody (…/node_modules/pug/lib/index.js:82:18)
      at Object.exports.compile (…/node_modules/pug/lib/index.js:269:16)
      at …/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:2382:59

The only packages involved here are:

• @vue/compiler-sfc
• pug
• pug-load
• pug-parser
• pug-error

In my case, I think @vue/compiler-sfc should dedent the code before sending it to the pug library.

• I made a minimal reproduction repository for the problem: https://github.com/rudolfbyker/vue-pug-indent-reproduction
• Here is an old PR trying to address the problem: https://github.com/vuejs/core/pull/3842
• Here is my new PR: https://github.com/vuejs/core/pull/7723

@webdiscus

Thank you for the suggestion. Looks like great, but I need some help with the configuration for my needs. I can flood here; will I be answered by your team if ask the question on Stack Overflow? Or it’s better to open the issue on @webdiscus/pug-loader?

@TokugawaTakeshi

For a question you can open new discussion. For a bug or feature request open new issue. For help with a configuration, create a repo and new issue with link to the repo.

@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.