New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load fallback language when needed (lazy-load) #34

Open
manniL opened this Issue Feb 25, 2018 · 9 comments

Comments

Projects
None yet
9 participants
@manniL
Copy link
Member

manniL commented Feb 25, 2018

nuxt-i18n version: 2.3.4

Imagine you have two languages, en (default) and de.
But only parts of the en language is localized in the de file.
If you now enter a page (e.g. /de/only-half-localized-route), you see the correct translations (for de) where it applies, but no en translation because the fallback language isn't loaded properly because of lazy-loading. Instead, you see the translation keys.

A naive fix for it would be to load the fallback language every time, but I guess there is a way to check if a fallback is needed and load the fallback language in that case (if not already loaded).

This feature request is available on Nuxt.js community (#c39)

@paulgv paulgv added the feature label Feb 26, 2018

@paulgv paulgv referenced this issue Apr 17, 2018

Closed

[WIP] 3.0.0 #72

6 of 7 tasks complete
@maximivanov

This comment has been minimized.

Copy link

maximivanov commented Jul 10, 2018

Any update on this? Or before feature is implemented, what's the way to load fallback language every time? (and not load all of language files at the same time)

@scippio

This comment has been minimized.

Copy link

scippio commented Jul 11, 2018

Any news?

@RecuencoJones

This comment has been minimized.

Copy link

RecuencoJones commented Jul 17, 2018

As a workaround for now we might be using the following:

// nuxt.config.js
module.exports = {
  srcDir: './src',
  ...
  modules: [
    '@nuxtjs/pwa',
    [
      'nuxt-i18n',
      {
        locales: [
          { code: 'en', iso: 'en-US', file: 'en.js' },
          { code: 'es', iso: 'es-ES', file: 'es.js' }
        ],
        defaultLocale: 'en',
        vueI18n: {
          fallbackLocale: 'en'
        },
        lazy: true,
        langDir: 'locales/'
      }
    ]
  ],
  ...
};

// src/locales/es.js
import { assignWith } from 'lodash';
import { loadTranslation } from '../services/contents';

const useDefault = (value, defaultValue) =>
  typeof value === 'object' ?
    assignWith({}, value, defaultValue, useDefault) :
    value || defaultValue;

export default () => Promise.all([
  loadTranslation('en'),
  loadTranslation('es')
])
.then(([ defaultMessages, localizedMessages ]) => 
  assignWith({}, localizedMessages, defaultMessages, useDefault));
@JkmAS

This comment has been minimized.

Copy link

JkmAS commented Oct 15, 2018

@RecuencoJones how does the loadTranslation function look like? Are you using axios or nuxt-axios in loadTranslation? Thx.

@RecuencoJones

This comment has been minimized.

Copy link

RecuencoJones commented Oct 15, 2018

@JkmAS it's a simple function running fetch to load translations from our CMS:

// src/services/contents.js
export function loadTranslation(lang) {
  return fetch(`${ config.api.host }/content/lang/${ lang }`, {
    headers: { ...defaultHeaders }
  })
  .then((res) => res.json());
}
@rchl

This comment has been minimized.

Copy link

rchl commented Nov 6, 2018

Would it be possible to prioritize it? I think it's a major missing feature.

@rchl

This comment has been minimized.

Copy link

rchl commented Nov 6, 2018

Possibly simpler workaround:

In nuxt_config.js, using require or import, load default locale manually and pass to vue-i18n configuration:

[
      'nuxt-i18n',
      {
            // ...
            vueI18n: {
                fallbackLocale: 'en',
                messages: {
                    en: require('./app/locales/en.json'),
                },
            },
      }
],

nuxt-i18n will merge current locale messages into same object and then vue-i18n will be able to access default locale for fallback.

@kevinpiac

This comment has been minimized.

Copy link

kevinpiac commented Nov 15, 2018

@rchl your solution works well and seems to be the simplest one.

I also agree that this missing feature is really important and should be prioritized!

@MarvinMiles

This comment has been minimized.

Copy link

MarvinMiles commented Jan 9, 2019

My function for load fallback language when needed

/plugins/i18n.js:

export default ({ app }, inject) => {

inject ('loadLanguageAsync', async (lang) => {
    if (app.i18n.locale !== lang) {
      if (!app.i18n.loadedLanguages.includes(lang)) {
        try {
          const module = await import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}`)
          const messages = module.default ? module.default : module
          app.i18n.setLocaleMessage(lang, typeof messages === 'function' ? await Promise.resolve(messages()) : messages)
          app.i18n.loadedLanguages.push(lang)
        } catch (error) {
          console.error(error)
        }
      }
      app.i18n.locale = lang
    }
  })

}

then call "this.$loadLanguageAsync(lang)" from anywhere

I am using that for translating via keyboard shortcuts events :)

Hope this will help someone

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment