CODEWITHSUNDEEP
javascriptvue.jsinternationalizationvue-i18n
Stephen
Stephen

Reputation: 1183

How to use i18n in the Vuex store

I have a project where I need to do translations inside the Vuex store. But I keep on getting an error when trying to translate using i18n inside the store.

I have tried to import and instance of i18n inside the store using the following import statement. But I then I get an error Uncaught TypeError: _i18n__WEBPACK_IMPORTED_MODULE_3__.default.t is not a function

import i18n from '@/i18n';

In the main.js file of my Vue project I import and use the i18n file:

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 is my i18n.js file that is located inside the src folder:

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(),
});

Upvotes: 5

Views: 11191

Answers (3)

Čamo
Čamo

Reputation: 4182

I can use this.$i18n in my store:

this.$i18n.t('campaign.setPhotodoc-error')

Upvotes: 1

equi
equi

Reputation: 914

For Vue 3 guys out there struggling with usage of i18n in the Vuex store, I was able to achieve it like this:

translations/index.js with basic setup

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
    fallbackLocale: 'en',
    globalInjection: true,
    messages: messages
})

export default i18n

main.js Import store and i18n and use them in Vue app instance

import i18n from './translations'
import store from './store'

const app = createApp(App)

app.use(store)
app.use(i18n)
app.mount('#app')

Vuex store module file with getter example:

import i18n from './translations'

const getters = {
  getNotification: (state) => {
      ...
      notification.title = i18n.global.t('notification.title')
      ...
  }
}

Upvotes: 8

Uğur Can
Uğur Can

Reputation: 164

I used vue-i18n in Vuex. Maybe it helps to you.

Create vue-i18n.js file like this;

import Vue from "vue";
import VueI18n from "vue-i18n";

// Localisation language list
import { locale as en } from "@/core/config/i18n/en.js";
import { locale as ch } from "@/core/config/i18n/ch.js";


Vue.use(VueI18n);

let messages = {};
messages = { ...messages, en, ch };

// get current selected language
const lang = localStorage.getItem("language") || "en";

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: lang, // set locale
  messages // set locale messages
});

export default i18n;

and import it to Vue in main.js file;

import i18n from "@/core/plugins/vue-i18n";

new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

import it inside your store or modules ( i imported in my vuex module);

import i18n from "@/core/plugins/vue-i18n";

then use it wherever you want (action, mutation, setter or getter);

const sample = i18n.t('ERRORS.NETWORKERROR');

en.js file;

export const locale = {
  LOGIN: {
    OPERATORID: "Operator ID",
    SIGNIN:"Sign In",
    SCANCARD: "Scan Card"
  },
  ERRORS: {
    NETWORKERROR: "Network error occurred!",
    UNAUTHUSERERROR: "Unauthorized user!",

  }
};

Upvotes: 3

Related Questions