I have two ionic vue apps… one upgraded from V4 and one started over on v7
both show the same info
Mac-mini:xxx sam$ ionic --version
7.2.0
Mac-mini:xxx sam$ npx cap doctor
[warn] The bundledWebRuntime configuration option has been deprecated. Can be safely deleted.
💊 Capacitor Doctor 💊
Latest Dependencies:
@capacitor/cli: 6.0.0
@capacitor/core: 6.0.0
@capacitor/android: 6.0.0
@capacitor/ios: 6.0.0
Installed Dependencies:
@capacitor/cli: 6.0.0
@capacitor/android: 6.0.0
@capacitor/core: 6.0.0
@capacitor/ios: 6.0.0
[success] iOS looking great! 👌
[success] Android looking great! 👌
they both use the same approach
App.vue
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script >
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
import { Device } from '@capacitor/device';
import i18n from './i18n'
//
export default defineComponent({
name: 'App',
components: {
IonApp,
IonRouterOutlet
},
methods: {
loadLocaleMessages(language) {
const locales = require.context('./i18n', true, /[A-Za-z0-9-_,\s]+\.json$/i)
console.log("locales found=" + JSON.stringify(locales.keys()))
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
if (matched[1].startsWith(language)) {
const locale = matched[1]
messages[locale] = locales(key)
}
}
})
console.log(" returning language messages=" + JSON.stringify(messages)
)
return messages
}
},
mounted() {
const device = Device;
device.getLanguageTag().then((res) => {
console.log('app Default lang', res.value);
if (res.value.includes('?')) {
const language = res.value.split('-')[0];
this.$i18n.locale = language;
} else {
console.log("app setting default lang=" + res.value)
try {
this.$i18n.locale = res.value;
}
catch (error) {
console.log("ap loading error ="+JSON.stringify(error))
}
}
console.log("app loading messages for locale="+this.$i18n.locale)
i18n.loadMessagesFor(this.$i18n.locale)
})
},
});
</script>
and the index.js from the i18 folder
import { createI18n } from 'vue-i18n'
import { nextTick } from 'vue'
//import { messages } from './messages'
//import { numberFormats } from './numbers'
//import { arabicPluralRules } from './plurals'
//import { datetimeFormats } from './datetimes'
// Set and expose the default locale
export const defaultLocale = 'en-US'
const msgs = { "fribble": "nothing" }
// Private instance of VueI18n object
let _i18n
// Initializer
function setup(options = { locale: defaultLocale, messages: msgs }) {
_i18n = createI18n({
locale: options.locale,
fallbackLocale: defaultLocale,
messages: options.messages,
// numberFormats,
// datetimeFormats,
// pluralizationRules: {
// 'ar-EG': arabicPluralRules,
// },
})
setLocale(options.locale)
return _i18n
}
async function loadMessagesFor(locale) {
console.log("loading messages from ./i18n/" + locale + ".json")
try {
const messages = await import(
"./" + locale + ".json"
)
console.log("index messages=" + JSON.stringify(messages))
_i18n.global.setLocaleMessage(locale, messages.default)
} catch (ex) {
console.log("load error="+JSON.stringify(ex))
}
return nextTick()
}
// Sets the active locale.
function setLocale(newLocale) {
_i18n.global.locale = newLocale
}
// Public interface
export default {
// Expose the VueI18n instance via a getter
get vueI18n() {
return _i18n
},
setup,
setLocale,
loadMessagesFor
}
the migrated one does translation successfully
the new one fails to load (import) the json file
const messages = await import(
"./" + locale + ".json"
)
console.log("index messages=" + JSON.stringify(messages))
_i18n.global.setLocaleMessage(locale, messages.default)
on ios for the upgraded app I see these messages
To Native -> App addListener 116177886
⚡️ [log] - app Default lang en-US
⚡️ [log] - app setting default lang=en-US
⚡️ [log] - app loading messages for locale=en-US
⚡️ [log] - loading messages from ./en-US.json
⚡️ [log] - index messages={"startup":....
on ios for the newly created app I see
[log] - app Default lang en-US
⚡️ [log] - app setting default lang=en-US
⚡️ [log] - app loading messages for locale=en-US
⚡️ [log] - loading messages from ./en-US.json
⚡️ [log] - load error={}
this wasn’t listed as a breaking change
i DID have the same folder linked into the projects src/i18n => i18n@ → …/…/cn-i18n/ , but on the NEW build run it used the source folder name off the link (./cn-i18n/en-US.json) , which doesn’t exist in the project folder
I had to copy the files to a real folder…
ONLY on the newly created project
i admit I created the project and then copied the src folder from the old v4 project in
everything else has worked without trouble
but the default App.vue doesn’t look changed
oh, and translation worked correctly on the upgraded app for both ios and android
doesn’t work for either on new project
i am using the lazy loading approach