Vue I18n and Ionic

Ionic Framework
1

I’m trying to add internationalization to a new Ionic Vue app, and I’m using Vue I18n. In main.js (I use JS, not TypeScript) I did the following:

...
import VueI18n from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

const i18nOptions = {
  locale: 'ja', // set locale
  messages, // set locale messages
}
...
const app = createApp(App)
  .use(IonicVue)
  .use(router)
  .use(VueI18n, i18nOptions)
...

When I run ionic serve, I get a blank page in the browser. ionic serve doesn’t report an error, but the browser console gives me this error:

Uncaught TypeError: Vue.prototype is undefined
    extend vue-i18n.esm.js:221
    install vue-i18n.esm.js:724
    use runtime-core.esm-bundler.js:2948
    <anonymous> main.js:46
    js app.js:1135
    __webpack_require__ app.js:854
    fn app.js:151
    1 app.js:1207
    __webpack_require__ app.js:854
    checkDeferredModules app.js:46
    <anonymous> app.js:994
    <anonymous> app.js:997

Anybody got any ideas on how to solve this? Is there a better way of achieving internationalization than using Vue I18n? Thanks.

2
  • make sure you are using the vue3 release - vue-i18n-next
  • examples are provided in the repo listed above Examples
2 Likes