the app doesn't get rtl when using rtl locale in vuetify v.3

Question

I'm using vuetify v.3 that is recently released

I have problem to use rtl support in Vuetify 3

as it said here

RTL (Right To Left) support is built in for all localizations that ship with Vuetify. If a supported language is flagged as RTL, all content directions are automatically switched

this is plugins/vuetify.ts

import { createVuetify } from 'vuetify'
import { fa } from 'vuetify/locale'
export default createVuetify({
  locale: {
    locale: 'fa',
    fallback: 'fa',
    messages: { fa },
  },
})

As you see I've imported fa ( farsi ,persian ) from locale and it is a rtl locale But the app doesn't get rtl .

and as it said here , fa is supported locale

Supported languages Currently Vuetify provides translations in the following languages:

af - Afrikaans (Afrikaans) ar - Arabic (اللغة العربية) az - Azerbaijani (Azərbaycan) bg - Bulgarian (български) ca - Catalan (català) ckb - Central Kurdish (کوردی) cs - Czech (čeština) da - Danish (Dansk) de - German (Deutsch) el - Greek (Ελληνικά) en - English es - Spanish (Español) et - Estonian (eesti) fa - Persian (فارسی) fi - Finnish (suomi)

Also when inspect page I see that lang attribute for html tag is set to en

I think maybe maybe there is something wrong with my codes.

what is the problem and How can I fix this ?

Answer 1

you should add rtl property to locale object and set your rtl locale as true.

import { createVuetify } from 'vuetify'
import { fa } from 'vuetify/locale'
export default createVuetify({
  locale: {
    locale: 'fa',
    fallback: 'fa',
    messages: { fa },
    rtl: {fa: true},
  },
})

Answer 2

For anyone having trouble with getting RTL to work with Vuetify 3 and Nuxt, you can wrap your layout using <v-locale-provider rtl>. As an example:

default.vue:

<template>
    <div>
        <v-locale-provider rtl>
            <VApp >
                <VMain>
                     <slot />
                </VMain>
            </VApp>
        </v-locale-provider>
    </div>
</template>