How to use Vue.js in ASP.NET projects

How to use Vue.js in ASP.NET projects

Vue.js is one of those new software technologies that is widely used around the world for web development. Vue.js is actually a JavaScript framework with various optional tools to create the right user interface. In this post, I will show you how use it in ASP.NET projects.

  1. Create a new project in ASP
  2. Open wwwroot then right click on lib folder and choose Add -> Client-side Library

  1. In Client-Side Library window select cdnjs for Provider, type vue in Library, then select Choose specific file:  tick the vue.js and vue.min.js. In the end, click on Install

When you install the vue.js you will see the vue folder under lib folder.

Now, the vue.js is added to your project and is ready to use. In this example, I am going to count the number of characters that user types in a textarea.

  1. Add below code to Razor page or View:
<div class="text-center" id="app">

    <textarea class="form-control" v-model="text" v-on:keyup="countTextarea"></textarea>

    <span>{{count}}</span>

</div>


<script src="~/lib/vue/vue.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            text: "",

            count: 0

        },

        methods: {

            countTextarea: function () {

                this.count = this.text.length;
            }
        }

    });

</script>

 

Then run your project and type in the textarea. You can see, for each character that you are typing the value of span will be change.

Recent Comments