How to fix Parsing error: invalid-first-character-of-tag-name.eslint (vue/no-parsing-error) in Vue

In my case by adding the following under the rules of .eslintrc.js worked:

"vue/no-parsing-error": [
    "error", 
    {
        "invalid-first-character-of-tag-name": false,
    }
],

PS: you may need to stop the server and run npm run lint for the rule to be applied

Other solutions if you do not want to update eslint:

Using v-text directive:

<div class="flex justify-center">
  <vs-chip v-if="current" class="text-base w-24" :color="color" v-text="
    
      getPercentage > 0 && getPercentage < 3
          ? 'Neutral'
  : getPercentage > 3 && current < average
  ? 'Buy'
  : 'Sell'
  ">
  </vs-chip>
</div>

Or using &lt replace <, and &gt replace >:

<div class="flex justify-center">
        <vs-chip v-if="current" class="text-base w-24" :color="color">
          {{
            getPercentage &gt 0 && getPercentage &lt 3
              ? "Neutral"
              : getPercentage &gt 3 && current &lt average
              ? "Buy"
              : "Sell"
          }}
        </vs-chip>
      </div>

This is probably better solved with a computed property instead of a nested ternary (I'm assuming that getPercentage, current and average are either data or props, hence adding this)

computed: {
  myLabel() {
    if (this.getPercentage > 0 && this.getPercentage < 3) {
      return "Neutral"
    } else if (this.getPercentage > 3 && this.current < this.average) {
      return "Buy"
    } else {
      return "Sell"
    }
  }
}

In component

<div class="flex justify-center">
  <vs-chip v-if="current" class="text-base w-24" :color="color">
    {{myLabel}}
  </vs-chip>
</div>