3

I'm working on the internalization of my website and the nuxt-i18n module has served me well so far. However, I haven't figured out how to fetch and load translations for the path from a server.

In case of the common translations, I fetch everything from a server and the initialization and populate store with the messages. Then I simply export the translations from the store as follows.

// en-US.js
import store from '../store';

export default store().state.dictionary.labels.en;

This is then lazyloaded, as described in the documentation

This is my config

  // nuxt.config.js
  modules: [
    ['nuxt-i18n', {
      locales: [
        {
          name: 'Czech',
          code: 'cs',
          iso: 'cs-CS',
          file: 'cs-CS.js',
        },
        {
          name: 'English',
          code: 'en',
          iso: 'en-US',
          file: 'en-US.js',
        },
      ],
      strategy: 'prefix_except_default',
      langDir: 'lang/',
      lazy: true,
      defaultLocale: 'cs',
    }],
  ],

However, it seems this is not implemented in case of the custom paths translations. Ideally, I'd like to use the first mentioned approach which defines the path translations in nuxt config.

So I ask, can I somehow do, in some way, something along these lines?

  modules: [
    ['nuxt-i18n', {
      ...
      pages: [
        {
          name: 'Czech',
          code: 'cs',
          iso: 'cs-CS',
          file: 'pages-cs.js',
        },
        {
          name: 'English',
          code: 'en',
          iso: 'en-US',
          file: 'pages-en.js',
        },
      ],
    }],
  ],

In the end, I would be content with the component approach as well. However, because the nuxtI18n is a property and not a function, I do not have access to Nuxt (this) and thus neither to the app's store. If the first option is impracticable, is there a way how to pass to the nuxtI18n property a value from the store?

I'd like to be able to do this.

  // contact.vue
  nuxtI18n: {
    paths: {
      cs: this.$store.state.pages.contact.cs
      en: this.$store.state.pages.contact.en
    },
  },

Any help much appreciated.

Dan
  • 473
  • 3
  • 13
  • hey, dan did you find the answer? – Art Mary Aug 14 '20 at 20:55
  • 1
    Hi. I did not. However, since then I've learned to better organize my code a separate localization files into several files and combine them with `mergeLocaleMessage`. Lately we've also been developing our own localization management platform, [Localazy](https://localazy.com/). That helped me eventually to achieve what I needed, sustainability of the localization files. – Dan Aug 20 '20 at 04:33

0 Answers0