The example shows how to localize the Dashboard component in a Vue application:
- Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc.
- Format numbers, dates, and currencies according to specific culture settings.
The example has the following structure:
- The asp-net-core-server folder contains the backend project built with ASP.NET Core 3.1.
- The dashboard-vue-app folder contains the client application built with Vue.
Files to Review:
The dashboard-vue-app project shows how to localize a client application with the component-specific JSON files for the German market (the de culture). Intl is used to format to dates, numbers, and currencies.
Files to Review:
Since the Web Dashboard exports data on the server side, you need to localize the server to complete the localization process. The asp-net-core-server project contains satellite resource assemblies for the German culture.
In the asp-net-core-server folder run the following command:
dotnet run
The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44393/api/dashboard.
See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.
This server allows CORS requests from all origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)
In the dashboard-vue-app folder, run the following commands:
npm install
npm run serve
Open http://localhost:8080/ in your browser to see the result.