diff --git a/docs/en/Community-Articles/2025-03-18-Using-Vue-Components/post.md b/docs/en/Community-Articles/2025-03-18-Using-Vue-Components/post.md index ed478af3de..ad5d19e22d 100644 --- a/docs/en/Community-Articles/2025-03-18-Using-Vue-Components/post.md +++ b/docs/en/Community-Articles/2025-03-18-Using-Vue-Components/post.md @@ -2,13 +2,13 @@ In modern web development, integrating dynamic front-end frameworks with server-side technologies has become increasingly essential for creating responsive and interactive applications. This article explores how to effectively use Vue components within Razor Pages in an ABP Framework application. We will delve into the process of consuming endpoints through ABP Client Proxies, leveraging ABP's powerful localization features to enhance user experience, and implementing ABP permissions to ensure secure access control. By the end of this guide, you will have a comprehensive understanding of how to seamlessly blend Vue.js with Razor Pages, empowering you to build robust and user-friendly applications. -This arcitle won't use any SPA approach. The goal of this article to use Razor Pages with simple Vue components to eliminate jQuery while developing MVC application. +This article won't use any SPA approach. The goal of this article is to use Razor Pages with simple Vue components to eliminate jQuery while developing MVC application. ## Creating the Solution -Let's create a simple TODO list application to demonstrate how to use Vue components in Razor Pages. I'll build a really simple backend without connection to a database for demonstration purposes. We will focus to the frontend part. +Let's create a simple TODO list application to demonstrate how to use Vue components in Razor Pages. I'll build a really simple backend without a connection to a database for demonstration purposes. We will focus on the frontend part. -- Creating solution with ABP CLI: +- Creating a solution with ABP CLI: ```bash abp new MyTodoApp -t app-nolayers -csf @@ -16,7 +16,7 @@ abp new MyTodoApp -t app-nolayers -csf ## Configure Vue -We need to add `@abp/vue` package to the project to use Vue components. +We need to add the `@abp/vue` package to the project to use Vue components. ```bash npm install @abp/vue @@ -28,7 +28,7 @@ npm install @abp/vue abp install-libs ``` -As a last step, we need to configure our bundle in `ConfigureBundles` method in `MyTodoAppModule.cs` file: +As a last step, we need to configure our bundle in the `ConfigureBundles` method in the `MyTodoAppModule.cs` file: ```csharp private void ConfigureBundles() @@ -53,7 +53,7 @@ private void ConfigureBundles() } ``` -> If your IDE doesn't recognize `VueScriptContributor`, you can add it manually: +> If your IDE doesn't recognize the namespace of the `VueScriptContributor`, you can add it manually: > > ```csharp > using Volo.Abp.AspNetCore.Mvc.UI.Packages.Vue; @@ -67,7 +67,7 @@ Let's create a simple Vue component to display the TODO list. ### Passing a simple message to the component -- Remove existing html coes in `Index.cshtml` and replace with the following code: +- Remove existing HTML codes in `Index.cshtml` and replace with the following code: ```html