'SyntaxError: Need to install with `app.use` function' when using Vuetify v-locale-provider component

Question

I'm using Nuxt 3 with Vuetify 3 to build my application, and I'm trying to use the v-locale-provider component to force RTL direction for a specific part of the component.

<v-locale-provider rtl>
    <div class="slider-container">
        <v-range-slider
            v-model="priceRange"
            step="1"
            :max="200000"
            strict
        ></v-range-slider>
    </div>
</v-locale-provider>

When I use the v-locale-provider component, the page does not load up, giving an error in the console:

Uncaught (in promise) SyntaxError: Need to install with `app.use` function (at message-compiler.esm-bundler.js:54:19)
    at createCompileError (message-compiler.esm-bundler.js:54:19)
    at createI18nError (vue-i18n.esm-bundler.js:100:12)
    at Object.useI18n (vue-i18n.esm-bundler.js:2219:15)
    at Object.provide (vue-i18n.ts:38:23)
    at provideLocale (locale.ts:54:23)
    at Object.setup [as _setup] (VLocaleProvider.tsx:24:28)
    at setup (defineComponent.tsx:83:37)
    at callWithErrorHandling (chunk-3NMN3MUW.js:1580:1)
    at setupStatefulComponent (chunk-3NMN3MUW.js:7383:1)
    at setupComponent (chunk-3NMN3MUW.js:7346:1)

I'm using vue-i18n for locale setting and translation. The issue might come from the initial registration of vue-i18n inside the Vuetify plugin definition. Using the v-locale-provider component without vue-i18n adapter works without a problem. Therefore, It might be possible that the v-locale-provider does not work with the vue-i18n adapter.

i18n.ts:

import {createI18n} from "vue-i18n";
import messages from "./messages";

const i18n = createI18n({
    legacy: false,
    locale: 'fa',
    fallbackLocale: 'en',
    messages
});

export default i18n;

vuetify.ts:

import i18n from "./i18n/i18n.ts";
import {createVueI18nAdapter} from "vuetify/lib/locale/adapters/vue-i18n";
import {useI18n} from "vue-i18n";
import {createVuetify, VuetifyOptions} from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const config: VuetifyOptions = {
        components, directives,
        locale: {
            adapter: createVueI18nAdapter({i18n, useI18n})
        }
    }
    const vuetify = createVuetify(config)

    nuxtApp.vueApp.use(vuetify)
})