CODEWITHSUNDEEP
vue.jspug
user16751547
user16751547

Reputation:

How to fix Indent error in pug with vue js

We have a whole network of projects, more than 15 projects, each of them has been working for more than three years. Today, suddenly after reinstalling node modules, an error appeared everywhere:

Syntax Error: Error: C:\Users\veneg\Desktop\***\assets2\src\views\template\Socials.vue:2:1
    1|
  > 2|   .social
-------^
    3|     a.social__link.rtl(v-for="(soc, index) in socials" :key="index" :href="soc.link" target="blank")
    4|       icon(:name="soc.name" nofill)
    5|

unexpected token "indent"

There are over 3000 files in the project with this error, how can I fix this?

I tried to play with pug loader versions but nothing helped.

My versions:

"vue-loader": "~15.6",
    "vue-style-loader": "~4.1",
    "vue-template-compiler": "~2.6",
    "webpack": "~4.29",
    "webpack-bundle-analyzer": "~3.0",
    "webpack-cli": "~3.2",
    "webpack-dev-server": "~3.1",
    "webpack-hot-middleware": "~2.24",
    "webpack-merge": "~4.2"
    "@vue/cli-plugin-babel": "4.2.0",
    "@vue/cli-plugin-eslint": "4.2.0",
    "@vue/cli-service": "4.4.1",
    "@vue/eslint-config-airbnb": "5.0.2",
 "pug": "2.0.4",
    "pug-plain-loader": "1.0.0",

Upvotes: 3

Views: 1609

Answers (1)

biodiscus
biodiscus

Reputation: 880

Instead of the pug-plain-loader try to use the @webdiscus/pug-loader.

This loader support the indent in Vue template:

<template lang='pug'>
    h1 Hello Pug!
    p Text
</template>

See how to use Pug loader with Vue and source of example.

Upvotes: 1

Related Questions