How to superscript a label in Vuetify textfield

Question

I use Vuetify. I like to have in the label the text "Target m²"

I tried with <sup>2</sub> but it doesn't work

<v-text-field 
  label="Target (in m<sup>2</sup>)"
   v-model="form.target" :error-messages="errors.target" > 
</v-text-field>                                  

How can I i superscript in the label?

Answer 1

You could use named slot label :

<v-text-field  v-model="form.target" :error-messages="errors.target" >
   <template #label>
      <label>Target (in m<sup>2</sup>)</label>
   </template>
 </v-text-field>

please check this example

PS : #label is a shorthand of v-slot:label

Answer 2

@Boussadjra Brahim's answer is correct but we need to define label prop as well in the v-text-field otherwise the label that is defined in the slot get disappeared.

so the correct way is as following

<v-text-field 
  label="Target"
  v-model="form.target"
  :error-messages="errors.target"
>
  <template v-slot:label>
    Target (in m<sup>2</sup>)
  </template>
</v-text-field> 

I hope the answer is helpful and the credit goes to jacekkarczmarczyk