I18n-module: Per-page translations

[alexgrozav]

What problem does this feature solve?

I have lots of documentation pages with non-repeating text blocks.

I'd like to be able to load the translations for these respective pages only when accessing them.

This would immediately improve a site's loading speed.

What does the proposed changes look like?

The way I see this, a good solution would be to have the same file structure you have in pages, but inside of the lang folder.

If you'd have pages/about.vue, the corresponding translations would be lang/en/about.js or lang/fr/about.js.

_{This feature request is available on Nuxt community (#c329)}

[rchl]

Per-page translations are supported. Not exactly the way you are asking for but have a look here: https://nuxt-community.github.io/nuxt-i18n/vue-i18n-loader.html#vue-i18n-loader

[remychvn]

Per-page translations are supported. Not exactly the way you are asking for but have a look here: https://nuxt-community.github.io/nuxt-i18n/vue-i18n-loader.html#vue-i18n-loader

Does this feature allow several translation files per language? Are they loaded only when the translation strings are going to be displayed?

[alexgrozav]

Per-page translations are supported. Not exactly the way you are asking for but have a look here: https://nuxt-community.github.io/nuxt-i18n/vue-i18n-loader.html#vue-i18n-loader

That might be a good solution to my problem, thank you! Do you know if vue-i18n-loader translations are lazy-loaded?

[rchl]

As far as I know, they are bundled with that particular page so loaded as lazily as it gets.

[rchl]

Not per-locale lazily though. All locales are loaded at once.

[alexgrozav]

I thought so. It would be amazing if it would be lazy-loading per locale the way it does with nuxt-i18n (fallback+current). I suppose the feature request should remain open, then..

[alex-chuev]

I would like to help with the implementation, and I already have different ideas on how to implement this. What is the best way to start work? Do this by myself or discuss implementation with someone?

[rchl]

@alex-chuev Feel free to discuss it here or in Discord with me (rafal#0842)

[alex-chuev]

1. After some thinking process I have figured out that it is possible to load additional translations using asynchronous imports or regular fetch/ajax request within asyncData method and register them using setLocaleMessage method for a current locale.

2. Also it is possible using asynchronous imports load whole components for different locales:

   components: {
    AboutUsEn: () => import('...'),
    AboutUsRu: () => import('...'),
    AboutUsDe: () => import('...'),
   },
   

   And inside the template we can

   <div class="about-us">
    <AboutUsRu v-if="ru" />
    <AboutUsDe v-else-if="de" />
    <AboutUsEn v-else />
   </div>
   

   It's quite handful when translated content contains different links, images and so on.

Both the approaches solve all my needs so I decided not to waste time on an additional solution.

[alexgrozav]

@alex-chuev In my opinion, this approach is hard to maintain:

• If you ever add another language, you'll need to add a new component in each and every place you use translations.
• You will need to maintain multiple component markups. Changing a common design aspect in one component will require changes in all the other ones as well.

If it works for you, that's great, but I think we should have a more maintainable approach for components that only have their translations changed and not their content.

[alex-chuev]

@alexgrozav What do you think about the first point? When we load missing translations in asyncData method on demand, merge them with already loaded translations using mergeLocaleMessage.

[alexgrozav]

That's actually a good workaround for the issue. Do you have access to the active locale at that time?

[alex-eri]

@alex-chuev where are mergeLocaleMessage docs?

[alex-eri]

Can i combine per page <i18n> and langDir: 'lang/' ?

[tvld]

Why not set lazy loading language for _specific components_ in the _same format_ as in nuxt.config.js ?

<script>
export default {
  i18n: {
    locales: [
      {
        name: 'English',
        code: 'en',
        iso: 'en-US',
        file: 'mypage.en.coffee'
      },
      {
        name: 'Nederlands',
        code: 'nl',
        iso: 'nl-NL',
        file: 'mypage.nl.coffee'
      }
    ],
    lazy: true,
    langDir: 'assets/lang/',
    defaultLocale: 'en'
  },

This would not only solve lazy loading but also different fallback per page, which I happen to have use case for ... ;)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tvld]

Changed to .coffee files in my comment as that is what we use ))

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.