Error: [Vuetify] Could not find injected rtl instance

[piyushagarwal2512]

I am recently upgrade my version to vuetify 3.0.2
and i am start getting this error

[MirzaeiDev]

I have same problem , but it didn't give me error instead doesn't work
and language is not working too
/plugins/vuetify.ts

import { createVuetify } from 'vuetify'
import { fa } from 'vuetify/locale'
import {defineNuxtPlugin} from "#app";

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        locale: {
            locale: 'fa',
            messages: {fa},
            fallback: 'fa',
            rtl: {
                fa : true
            },
        },
    })

    nuxtApp.vueApp.use(vuetify)
})

Nuxt 3 - Vuetify 3

[MirzaeiDev]

no language is working good but I don't saw it

[MirzaeiDev]

I came to a conclusion
rtl works fine because whatever you put in the component v-locale-provider will rtl, which means that Vuetify understands rtl

The question arises here, how it doesn't work on the rtl page?

• In vuetify 2, we put rtl:true in its options, and then it gave the `v-application--is-ltr' class to the root.

• But in vuetify 3, if we put this in the options

locale: {

     locale: 'fa',
     messages: {fa},
     rtl: {
         fa: true
     },
},

Nothing is added to the root (I mean <div id="__nuxt" data-v-app> by root here)

Well, now the solution that comes to my mind to solve this bug is to manually add the v-locale--is-rtl class to the root (<div id="__nuxt" data-v -app class="v-locale--is-rtl">)

You might say to yourself, well, we give the class to the root, but how do we fix the components such as dialog that are not in the root?
rtl is applied to components that are not in the root

Note: If you could not give a class to the root, use the first tag in layouts as the root.

[ats-shublaq]

did you find an answer?