Language change without full page reload

By default, language changes cause a full page reload.

To not trigger a full reload, you can change your i18n configuration (opens new window).

// nuxt.config.js
export default {
  i18n: {
    reloadOnLanguageChange: false,
  },
};

This will translate static strings to the new language, but won't re-fetch data from commercetools. This may mean that strings coming from commercetools won't be updated with the new language. To fix this, you can watch for when selectedLocale changes, and in the effect, make your requests.

For example, if we want to call search whenever the language changes:

import { watch } from '@nuxtjs/composition-api';
import { useLocale, useCategory } from '@vsf-enterprise/commercetools';

export default {
  setup () {
    const { search, categories } = useCategory('menu-categories');
    const { selectedLocale } = useLocale();

    watch(selectedLocale, async () => {
      await search();
    });

    return {
      categories
    };
  }
}

Updating i18n locale

For i18n to know that the selected locale has been changed, changeLocale method from useLocale composable needs to be called with new locale passed as a param.

If you want to read more about useLocale composable, please see its documentation.

If we need to update the URL based on the new locale, we can use switchLocalePath from i18n and router from the useRoute composable. For example:

import { useRouter } from '@nuxtjs/composition-api';
import { useLocale } from '@vsf-enterprise/commercetools';

export default {
  setup () {
    const router = useRouter();
    const { changeLocale } = useLocale();

    const onLocaleChange = (locale) => {
      changeLocale(locale);
      router.push(router.app.switchLocalePath(locale));
    }

    return {
      onLocaleChange
    };
  }
}

Make sure to identify all places affected by language changes, and apply any updates or requests accordingly. This may include:

• category names
• product names
• breadcrumbs
• menus
• products in wishlist
• products in cart
• orders history