HTML in vuetify hints

Question

Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:

<v-checkbox
   v-model="create"
   label="Nice label"
   persistent-hint
   hint="<span class=&quot;red--text&quot;>Red hint</span>"
/>

This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?

Answer 1

In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:

<v-checkbox
   v-model="create"
   label="Nice label"
   persistent-hint
   hint="<span class=&quot;red--text&quot;>Red hint</span>"
>
<template v-slot:message="{ message, key }">
 <span v-html="message"></span>
</template>
</v-checkbox>

It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.