Switching from vue-i18n to @nuxtjs/i18n — Folder Structure & Dynamic Imports Issue

Hey everyone!
I was using vue-i18n ("vue-i18n": "^9.2.2") with this setup and now I tried switching to @nuxtjs/i18n (version 9.1.1).

Previous setup with vue-i18n:
plugins/i18n.js

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "el",
    fallbackLocale: "el",
  });

  vueApp.use(i18n);
});

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "el",
    fallbackLocale: "el",
  });

  vueApp.use(i18n);
});

The problem:
I have a lot of language files organized by page and component:

lang\GR\Common\Footer.json  
lang\EN\Common\Footer.json   
lang\GR\HomePage\test.json  
lang\EN\HomePage\test.json

lang\GR\Common\Footer.json  
lang\EN\Common\Footer.json   
lang\GR\HomePage\test.json  
lang\EN\HomePage\test.json

On each page, I import the JSON files with require() based on the current locale.
Now, with @nuxtjs/i18n, I’m struggling to find the best way to keep this folder structure and dynamically load the translations.
Do you have any idea about that? Thank you

Nuxt•12mo ago•

13 replies

konsav

Switching from vue-i18n to @nuxtjs/i18n — Folder Structure & Dynamic Imports Issue

Hey everyone!
I was using vue-i18n ("vue-i18n": "^9.2.2") with this setup and now I tried switching to @nuxtjs/i18n (version 9.1.1).

Previous setup with vue-i18n:
plugins/i18n.js

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "el",
    fallbackLocale: "el",
  });

  vueApp.use(i18n);
});

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "el",
    fallbackLocale: "el",
  });

  vueApp.use(i18n);
});

The problem:
I have a lot of language files organized by page and component:

lang\GR\Common\Footer.json  
lang\EN\Common\Footer.json   
lang\GR\HomePage\test.json  
lang\EN\HomePage\test.json

lang\GR\Common\Footer.json  
lang\EN\Common\Footer.json   
lang\GR\HomePage\test.json  
lang\EN\HomePage\test.json

Switching from vue-i18n to @nuxtjs/i18n — Folder Structure & Dynamic Imports Issue

Similar Threads

Switching from vue-i18n to @nuxtjs/i18n — Folder Structure & Dynamic Imports Issue

Similar Threads

Similar Threads

Similar Threads