Vue 3 support

[adnan-sahin]

Hi, I installed the "vue-i18n": "^9.1.9" package in vue 3 project.
i18n is registered in main.js file. you can see how to create i18n instance and export the instance below.

i18n.js
// Create i18n instance with options

const i18n = createI18n({
    globalInjection: true,
    locale: 'en', // set locale
    fallbackLocale: 'en', // set fallback locale
    messages, // set locale messages
})
export default i18n

i18n is also registered in an external javascript file like this import i18n from '@/plugins/i18n'.
The same i18n instance is used in the external js file.

when I call t function like this i18n.t('cannotBeBlank') in external file, I got error below.

[kazupon]

I would guess, since your setup code,
you need to install with app.use that is created createApp

[adnan-sahin]

Hi @kazupon ,
Thank you so much for your answer. but I have some questions.
you can see how to use i18n in the main.js file.
//main.js file

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
import i18n from './plugins/i18n'
import './styles/index.scss'
import store from './store'
import router from './router'
import unicons from './plugins/unicons'
import VueGridLayout from 'vue-grid-layout'
import VueTheMask from 'vue-the-mask'
import './plugins/amchart'
import addInstanceMethods from './plugins/vueInstanceMethods'

const app = createApp(App)
    .use(i18n)
    .use(store)
    .use(router)
    .use(unicons)
    .use(VueGridLayout)
    .use(VueTheMask)
    .use(addInstanceMethods, {})
    .use(ElementPlus, {
        size: 'small',
        i18n: (key, value) => i18n.t(key, value),
    })

router.isReady().then(() => app.mount('#app'))

After I register in main.js file, How can I use i18n in a js file? When I try to use i18n in file like helpers.js and routers.js file, store.js,
I got error. You can see it below.