Browse Source

Add Video Link to Community Article

pull/22409/head
Enis Necipoglu 2 years ago
committed by GitHub
parent
commit
4dc1725310
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 8
      docs/en/Community-Articles/2025-03-18-Using-Vue-Components/post.md

8
docs/en/Community-Articles/2025-03-18-Using-Vue-Components/post.md

@ -4,6 +4,10 @@ In modern web development, integrating dynamic front-end frameworks with server-
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. 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.
> **🎉 Also video version is available!**
>
> [Watch on YouTube Now!](https://youtu.be/sZ8iSMovHZs?si=GynuJjsLEI1p2g6w)
## Creating the Solution ## 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 a connection to a database for demonstration purposes. We will focus on 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.
@ -71,13 +75,13 @@ Let's create a simple Vue component to display the TODO list.
```html ```html
<div id="vue-app"> <div id="vue-app">
<todo-component :message="'Welcome, @CurrentUser.UserName !'"></todo-component> <message-component :message="'Welcome, @CurrentUser.UserName !'"></todo-component>
</div> </div>
``` ```
- Navigate to the `Index.cshtml.js` file and add the following code: - Navigate to the `Index.cshtml.js` file and add the following code:
```js ```js
Vue.component('todo-component', { Vue.component('message-component', {
template: '<div>Hello, {{ message }}</div>', template: '<div>Hello, {{ message }}</div>',
props: ['message'] props: ['message']
}); });

Loading…
Cancel
Save