# 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 (opens new window).
<template>
<!-- ✓ GOOD -->
<h1>{{ $t('foo.bar') }}</h1>
<h1>{{ foo }}</h1>
<h1 v-t="'foo.bar'"></h1>
<!-- ✗ BAD -->
<h1>Lorem ipsum</h1>
<div
title="Lorem ipsum"
aria-label="Lorem ipsum"
aria-placeholder="Lorem ipsum"
aria-roledescription="Lorem ipsum"
aria-valuetext="Lorem ipsum"
/>
<img alt="Lorem ipsum">
<input placeholder="Lorem ipsum">
<h1 v-text="'Lorem ipsum'" />
<!-- Does not check -->
<h1>{{ 'Lorem ipsum' }}</h1>
<div
v-bind:title="'Lorem ipsum'"
/>
</template>
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
{
"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.
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0