Working with VueJS 2 and ASP.NET MVC 5 in Visual Studio

VueJS (Vue) 2 is gaining popularity as lightweight, powerful web based UI framework, official website defines it as

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

It’s quite easy to work VueJS and ASP.NET MVC 5, let’s check out in this article

Use either Visual Studio 2017/ 2015 (any edition) for working (integrating) Vue with MVC 5. You can either use any existing or create a brand new ASP.NET MVC 5.

Step 1 – Install VueJS using NuGet

VueJS can be used either through CDN or by using NuGet package manager in ASP.NET MVC 5. Let’s use NuGet,  right click on the project to open NuGet package manager window, search for Vue and then install it.

vuejs

Add VueJS using NuGet

Once installed, it will add two files vue.js and vue.min.js (minified version) in the Scripts folder

Step 2 – Add VueJS script in _Layout page

Just like other JavaScript pages, refer Vue in the _layout cshtml page, so that its available across the application.

We can bundle Vue in BundleConfig.cs, but here let’s keep it simple.

Step 3 – First VueJS code

Open About.cshtml file (any cshtml), copy below code to declarative render on HTML page.

Breaking down the above code

  1. aboutPage is just usual DIV tag of HTML.
  2. new Vue() is initializing the VueJS.
  3. The initialized Vue object execution scope is limited to aboutPage DIV element. This is achieved by assigning reserved keyword el to the id of the div element. This is similar to AngularJS 1.* concept.
  4. To render anything on UI, we are using data keyword as JS object. The data object has message property to be displayed inside DIV tag.
  5. {{message}} is text interpolation syntax to access the message property of Vue instance. This is again similar to AngularJS 1.* concept.

The el of new Vue instance should match with HTML DOM id property to kick off Vue

Step 4 – VueJS in action

Run the application, navigate to HTML page where Vue is defined to see it action.

vuejs

Running VueJS in ASP.NET MVC 5

Step 5 – Vue’s Reactive nature

When running the application, open console window of the browser (Chrome in this example), you can play with message property of Vue instance as shown in the image below. As soon as you change message property value, the DOM gets changed automatically

vuejs

Reactive nature of VueJS

 

The data and the DOM are now linked, and everything is now reactive.

2 Responses

  1. deepeshpandole says:

    good information

  1. November 17, 2017

    […] MVC5でVueを試してみました。 もっとも簡単な手順をみつけました。 http://www.mithunvp.com/working-vuejs-asp-net-mvc-5-visual-studio/ […]

Leave a Reply