Description
The v-icon
component in Vuetify for Vue 2 uses the default slot to define the icon ID. This is not user-readable text, so I'd like to disable vue/no-bare-strings-in-template
for all contents of any <v-icon>
components.
For Vue3, this has been moved from a slot to an icon
prop, so it's a non-issue there. But ignoring slot contents for some components seems like a good addition to this rule.
What rule do you want to change?
vue/no-bare-strings-in-template
Does this change cause the rule to produce more or fewer warnings?
Fewer
How will the change be implemented? (New option, new default behavior, etc.)?
New option to allow some components or tags to be exempted (by name). For example:
'vue/no-bare-strings-in-template': ['error',
{
ignoreSlots: {
'v-icon': [ true /* true means default slot */, 'some-other-slot-name' ]
}
}
]
Please provide some example code that this change will affect:
<v-icon color="error">
$power
</v-icon>
What does the rule currently do for this code?
Error, because the rule thinks that $power
should be localized.
What will the rule do after it's changed?
No error.
Additional context
Activity
[-]vue/no-bare-strings-in-template: per-component exclusions[/-][+]vue/no-bare-strings-in-template: per-component ignoring of slot content[/+]waynzh commentedon Dec 11, 2024
As a workaround, you can use the plain text whitelist
allowlist
option, or use something like{{ '$power' }}
to bypass the check.Providing a new option to ignore slots might not be a general solution, so I'll leave this open for others to share their opinions.
justingrant commentedon Dec 11, 2024
If
whitelist
let me use regexes, then it would work perfectly, because I could whitelist something like/\$\w+/
. But having to manually add every icon name to a whitelist option would be a big hassle.FloEdelmann commentedon Dec 12, 2024
Allowing regexp patterns in
allowlist
seems like a good idea to me. PRs welcome for that 🙂vue/no-bare-strings-in-template
allow numbers #2695allowlist
support regex #2734