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 dev
Open your browser and navigate to the URL specified in the command output to see the result. The client Web Dashboard app uses data from the newly created server (http://localhost:5000/api/dashboard).
(you will be redirected to DevExpress.com to submit your response)