Vue3 i18n main.js setup

main.js

import { createApp } from 'vue'
import App from './App.vue'

// i18n
import I18n from './i18n.js'

const i18n = createI18n({
  locale:
    localStorage.getItem('lang') ||
    // Detect user's browser language
    I18n.detectLanguage() ||
    process.env.VUE_APP_I18N_LOCALE,
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'ko',
  // Load selected lang's .json file
  messages: I18n.loadLocaleMessages()
})


const app = createApp(App)
app.use(i18n)

app.mount('#app')

If it’s a string, the @ shouldn’t matter. It’s hard to say what went wrong without seeing the code directly.

Can i show u? Have u free time to think about it?

For people coming this far, you need to run npm install vue-i18n@next to be able to import { createI18n } from 'vue-i18n'
https://vue-i18n.intlify.dev/guide/migration/breaking.html