useLocale

Features

useLocale composable can be used for:

• Getting available locales
• Getting current locale
• Getting default locale
• Setting new locale

API

• changeLocale - changeLocale - function for changing locale without a full page reload. When invoked, it sets the new locale in i18n and populates the selectedLocale property. changeLocale accepts a single locale parameter.

  • locale: string - locale code

• availableLocales: AvailableLocale[] - an array that contains available locales.

• defaultLocale: string - the default locale code set in i18n config.

• selectedLocale: string - a reactive string containing the currently selected locale. It's value is set based on cookie, and if not available it comes from value set in i18n and defaults to defaultLocale.

  type AvailableLocale = {
    code: string;
    label: string;
    file: string;
    iso: string;
  };
  

Example

import { useLocale } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const { 
      availableLocales,
      defaultLocale,
      selectedLocale,
      changeLocale
    } = useLocale();
    
    const onLocaleChange = (locale) => {
      changeLocale(locale);
    }

    return {
      availableLocales,
      defaultLocale,
      selectedLocale,
      onLocaleChange
    };
  }
}