Getting Started with Kendo UI for Vue Native Internationalization

The Kendo UI for Vue Native Internationalization package applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers.

Together with the Localization options, the Internationalization package provides the globalization features of Kendo UI for Vue Native. For more information on the globalization aspects which are available for each component, refer to the article on globalization support. For more information on the date and number formats Kendo UI for Vue Native supports, refer to the kendo-intl GitHub repository.

The package exports the following types of provider components:

• An IntlProvider component and an API for the parsing and formatting of dates and numbers.
• A LocalizationProvider component and an API for the translation of component messages into different languages.

The Kendo UI for Vue Native Internationalization feature is part of the Kendo UI for Vue Native library which provides native Kendo UI components for the Vue ecosystem and is available under the kendo-vue-intl NPM package.

Basic Usage

The following example demonstrates how to utilize the IntlProvider component in basic use-case scenarios.

Functionality and Features

• Loading default and additional locale data
• Loading messages for different languages
• Services for default and customized internationalization and localization
• Reacting to locale changes

Using CDN

To use the Kendo UI for Vue Native Internationalization package with CDN, follow the below steps:

1. Reference the intl package.

Copy Code  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>

2. Follow the instructions in this article to activate your product license. You can skip this step if your application already contains a license key.

Initializing with Webpack

1. Download and install the package:

   Copy Code   npm install --save @progress/kendo-vue-intl @progress/kendo-licensing

2. Follow the instructions on the Kendo UI for Vue My License page to activate your license. You can skip this step if your application already contains a Kendo UI license file.

Dependencies

The Internationalization package requires the following peer dependencies that have to be installed by your application:

• @progress/kendo-licensing

The following dependencies are required only when you apply internationalization to a locale that is different from the default en-US one.

• cldr-core
• cldr-dates-full
• cldr-numbers-full

The following dependencies will be installed automatically:

• @telerik/kendo-intl

Suggested Links

• API Index of the Internationalization
• Troubleshooting
• Localization
• Globalization Support
• Kendo UI Productivity Tools extension for VS Code