[Vuejs]-How to use JSON files with createI18n in Vue

by

0👍

✅

I finally got it. The below code will load locale files from whatever path you specify in the loadPath option and uses the new i18next-http-backend since the i18next-xhr-backend was deprecated. And this code will auto detect the language and switch to the correct language if you locale file names have a structure like this: en-US.json, en-PH.json, es-MX.json, etc.

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import i18nextHttpBackend from 'i18next-http-backend'

i18next.use(i18nextHttpBackend).use(LanguageDetector)
  .init({
    detection: {
      caches: false
    },
    fallbackLng: {
      default: ['en-US']
    },
    whitelist: [
      'en',
      'en-PH',
      'en-US',
      'es-MX'],
    backend: {
      loadPath: 'src/locales/{{lng}}.json'
    },
    load: 'currentOnly',
    interpolation: { escapeValue: false },
    saveMissing: true,
    saveMissingTo: 'all'
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

And then use it by having this code in your main.js:

const app = createApp(App)
i18next(app)
app.mount('#app')
👤mcool

1👍

It’s a good practice to create a separate folder for translation files, for example – locales. In this folder, you can store your json files for each target language.

src/locales directory content example:

- index.js
- en.json
- fr.json
- uk.json

src/locales/index.js:

import en from "./en.json";
import fr from "./fr.json";
import uk from "./uk.json";

export const languages = {
  en: en,
  fr: fr,
  uk: uk,
};

src/main.js:

import { createI18n } from "vue-i18n";
import { createApp } from "vue";

import "./styles/main.scss";
import App from "./App.vue";

import { languages } from "@/locales";

const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  legacy: false,
  globalInjection: true,
  messages: languages
});

const app = createApp(App);

app.use(i18n);
app.mount('#app');
👤Andrii Bodnar

Leave a comment