[Vuejs]-For rtl languages, how to right-align v-text-field label?

by

1👍

✅

You need to specify rtl option where you bootstrap vuetify (in vuetify constructor options). Labels will automatically appear on right side.

new Vuetify({
    rtl: true,
    // other options
})

You can update rtl option dynamically in vue component like this

this.$vuetify.rtl = true // or false
👤Nafees Anwar

0👍

In Vue js 3 or Nuxtjs 3: The following example demonstrates how to force RTL for a specific section of your content, without switching the current language, by using the v-locale-provider component:

<v-app>
  <v-card>...</v-card> <!-- default locale used here -->

  <v-locale-provider rtl>
    <v-card>...<v-card> <!-- default locale used here, but with RTL active -->
  </v-locale-provider>
</v-app>

For example:

<v-locale-provider rtl>
     <v-text-field v-model="username" label="نام کاربری" />
</v-locale-provider>
👤Mohammad Hosseini

Leave a comment