Custom directive for attributes

[DerZade]

trafficstars

Clear and concise description of the problem

I often stumble upon the problem that I need to localize attributes / props of child components. With the old API I usually ended up using something like this:

<img :aria-label="$t('my-key')" />

But to make something similar work with the new composition API (at least when used properly), I would need to add the following to every component:

const { t } = useI18n()

In addition to this, there are performance drawbacks, when using $t / t compared to using the v-t directive (at least according to the docs)

Suggested solution

I would love to have a better solutions for this. Maybe something like the following:

<img v-t:aria-label="'my-key'" />

(I don't really have experience in writing custom directives, so I have no idea if that would even be possible.)

That being said, I'm not at all set on that specific syntax. I would just appreciate a short directive-based solution to localizing attributes / props.

Alternative

No response

Additional context

No response

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.