Template Simple Expressions

Checks if the template is using only simple expressions.   
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-expressions-in-templates

❓ Why it's good to follow this rule?

• Simplicity: Simple expressions are easier to read and understand.
• Readability: Simple expressions are easier to read and understand.
• Consistency: Using simple expressions makes the code more consistent and easier to maintain.

😱 Examples of code for which this rule will throw a warning

WARNING

The following code contains complex expressions within the template, which should be refactored into computed properties or methods.

<template>
  {{
    fullName.split(' ').map((word) => {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }}
</template>

🤩 How to fix it?

TIP

Refactor complex expressions into computed properties or methods to improve readability and maintainability.

<!-- Correct: Simple expression in template -->
<script setup>
const normalizedFullName = computed(() => {
  return fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
})
</script>

<template>
  {{ normalizedFullName }}
</template>

🛠 How to override?

The default max expression length for this rule is 40.

You can override through the new override option in .config/vue-mess-detector.json ⬇️

{
  "override": {
    "maxExpressionLength": 50
  }
}