eslint-plugin-vue

Appearance

Return to top
On this page

vue/no-bare-strings-in-template

disallow the use of bare strings in <template>

📖 Rule Details

This rule disallows the use of bare strings in <template>.
In order to be able to internationalize your application, you will need to avoid using plain strings in your templates. Instead, you would need to use a template helper specializing in translation.

This rule was inspired by no-bare-strings rule in ember-template-lint.

Now loading...

TIP

This rule does not check for string literals, in bindings and mustaches interpolation. This is because it looks like a conscious decision.
If you want to report these string literals, enable the vue/no-useless-v-bind and vue/no-useless-mustaches rules and fix the useless string literals.

🔧 Options

js
{
  "vue/no-bare-strings-in-template": ["error", {
    "allowlist": [
      "(", ")", ",", ".", "&", "+", "-", "=", "*", "/", "#", "%", "!", "?", ":", "[", "]", "{", "}", "<", ">", "\u00b7", "\u2022", "\u2010", "\u2013", "\u2014", "\u2212", "|"
    ],
    "attributes": {
      "/.+/": ["title", "aria-label", "aria-placeholder", "aria-roledescription", "aria-valuetext"],
      "input": ["placeholder"],
      "img": ["alt"]
    },
    "directives": ["v-text"]
  }]
}
  • allowlist ... An array of allowed strings.
  • attributes ... An object whose keys are tag name or patterns and value is an array of attributes to check for that tag name.
  • directives ... An array of directive names to check literal value.

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation