I am grappling with an issue in my project where I need to perform translations within the Vuex store. Every time I attempt to translate using i18n inside the store, an error occurs.
I have attempted to import and utilize i18n inside the store by using the following import statement. However, it results in the error
Uncaught TypeError: _i18n__WEBPACK_IMPORTED_MODULE_3__.default.t is not a functionimport i18n from '@/i18n';
In the main.js file of my Vue project, I import and implement the i18n file as follows:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store';
import i18n from './i18n';
createApp(App).use(i18n).use(store).use(router).mount('#app');
This snippet represents my i18n.js file located within the src directory:
import { createI18n } from 'vue-i18n';
function loadLocaleMessages() {
const locales = require.context(
'./locales',
true,
/[A-Za-z0-9-_,\s]+\.json$/i
);
const messages = {};
locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i);
if (matched && matched.length > 1) {
const locale = matched[1];
messages[locale] = locales(key);
}
});
return messages;
}
export default createI18n({
legacy: false,
locale: localStorage.locale ?? 'nl',
globalInjection: true,
messages: loadLocaleMessages(),
});