New to Kendo UI for Vue? Start a free 30-day trial

Services

The Internationalization package exposes IntlService service for default and customized internationalization of locales and LocalizationService for providing messages based on the current language.

Using the IntlService in Components

To use the service in your own components:

  1. Use the IntlProvider component in your parent component.
  2. If you require locale data that is different from the default en-US locale data, load the data you need in your parent component.
  3. Inject the IntlService in your child component using the below code:
  inject: {
    kendoIntlService: { default: null },
  }
  1. Access the IntlService in the child component by using the provideIntlService function.
Example
View Source
Change Theme:

Applying the LocalizationService in Components

The toLanguageString method of the LocalizationService accepts a key and a default value. To use the LocalizationService in your own components in conjunction with the LocalizationProvider:

  1. Use the LocalizationProvider component in your parent component.
  2. Set the language property.
  3. Inject the Localization Service in your child component using the below code:
  inject: {
    kendoLocalizationService: { default: null },
  }
  1. In your child component, access the LocalizationService by using the provideLocalizationService function.
Example
View Source
Change Theme:

Customizing the Default Service

To override the default behavior of the internationalization service:

  1. Inherit IntlService and override the necessary methods.
  2. Inherit the IntlProvider component and override its getIntlService method.
  3. Use the customized IntlProvider component.
Example
View Source
Change Theme: