# Services

The Internationalization package exposes [`IntlService`](https://www.telerik.com/kendo-vue-ui/components/intl/api/intlservice) service for default and customized internationalization of locales and [`LocalizationService`](https://www.telerik.com/kendo-vue-ui/components/intl/api/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](https://www.telerik.com/kendo-vue-ui/components/intl/internationalization/loading-data) in your parent component.
3. Inject the `IntlService` in your child component using the below code:

```js
  inject: {
    kendoIntlService: { default: null },
  }
```

4. Access the `IntlService` in the child component by using the [`provideIntlService`](https://www.telerik.com/kendo-vue-ui/components/intl/api/provideintlservice) function.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/intl/use-in-component/source.txt)

## Applying the `LocalizationService` in Components

The [`toLanguageString`](https://www.telerik.com/kendo-vue-ui/components/intl/api/localizationservice#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`](https://www.telerik.com/kendo-vue-ui/components/intl/api/localizationproviderprops#language) property.
3. Inject the `Localization Service` in your child component using the below code:

```js
  inject: {
    kendoLocalizationService: { default: null },
  }
```

4. In your child component, access the `LocalizationService` by using the [`provideLocalizationService`](https://www.telerik.com/kendo-vue-ui/components/intl/api/providelocalizationservice) function.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/intl/localization/source.txt)

## Customizing the Default Service

To override the default behavior of the internationalization service:

1. Inherit [`IntlService`](https://www.telerik.com/kendo-vue-ui/components/intl/api/intlservice) and override the necessary methods.
2. Inherit the [`IntlProvider`](https://www.telerik.com/kendo-vue-ui/components/intl/api/intlproviderprops) component and override its `getIntlService` method.
3. Use the customized `IntlProvider` component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/intl/custom-service/source.txt)

## Suggested Links

* [IntlService API Reference](https://www.telerik.com/kendo-vue-ui/components/intl/api/intlservice)
* [LocalizationService API Reference](https://www.telerik.com/kendo-vue-ui/components/intl/api/localizationservice)
* [Troubleshooting](https://www.telerik.com/kendo-vue-ui/components/intl/internationalization/troubleshooting)