Working with Vue.js and ASP.NET Web API 2

Introduction

Vue.js is an awesome open source javascript framework having more than 140K stars on GitHub. You can make web apps with it, mobile apps by combining it with a framework like OnsenUI/Cordova or desktop app if used with Electron.js

Whereas ASP.NET Web API 2 is a very popular server side engine developed by Microsoft.

In this article we are going look how we can make a simple Vue.js app that loads a list of Users from a Web API 2 project and show on the page.

So let’s get started!

Creating Web API 2 Project

Let’s first create the API. Create a new Web API 2 project from Visual Studio like below:

Create a ASP.NET Web Application
Select empty project with Web API option

Your new project is ready. Next add a ‘Web API 2 – Empty controller’ named UsersController so you can create your first endpoint to return the users list:

Our controller is ready but its empty. So let’s add a method named GetUsers() it will return a static list of users with their ages. I created a User model class to make things proper.

Make necessary model classes

Now one last part. We need to bypass the Cross Origin Requests (CORS) policy. CORS is a W3C standard for cross origin request protection. But if you’re building front end with Vue.js, React.js or any other front end framework you may need to bypass this manually.

For now we will allow all origins to access our website. However, if your Vue app is hosted on the same server, you will not have CORS issue after deployment.

Enable CORS support by installing the following package:

Add CORS package
Enable CORS and default route

Notice, I have also changed the default route template to allow custom methods more easily.

So everything’s setup on server side, now lets start the debug session by pressing F5 key and try to navigate to our route. For my case, my debug session is hosted with port :58629. Yours will be different.

Browse your API for checking your endpoints if they are working or not

Creating the Vue.js app with vue-cli-init

So we have the API ready, now let’s create the Vue.js app. If you have vue cli installed then create a new project or you can install vue-cli-init from npm:

npm install -g @vue/cli-init

After vue cli-init is done installing type:

vue init webpack myproject

Select basic options, no-eslint and choose babel for now and runtime compiler option for compiling.

This will create a new project in your selected directory. Vue comes with default components setup. We can delete them and continue. Move into the project folder and run this command to start your server

npm run dev

Your vue app is ready:

Your Vue app is ready!

Your basic project structure will be like this

Basic Vue 2.0 app structure

Go to App.vue and remove all references for HelloWorld component which comes with the new project as default component. Create a new Users property in data and show it using a for loop on list item like this:

<template>
<div id="app">
    <ul>
      <li v-for="user in users">
        {{ user.Name }} is {{ user.Age }} years old
      </li>
    </ul>
</div>
</template>

<script>

export default {
  name: 'App',
    data: function(){
      return {
        users: [] 
      }
    },
  components: {

  },

}
</script>

Now let’s install axios. Axios is an excellent package to work with API. It makes http calls really simple. Install axios by running the following npm command.

npm install axios

Import axios in your App.vue component and add the following code:

axios('http://localhost:58629/api/Users/GetUsers')
  .then((response) => {
    if(response.status === 200){
      this.users = response.data;
    }
  });

So what did we do here? We are sending a get request to our api url which we created earlier. Then we check for response in the ‘then’ promise function. If the status is 200 which means Ok. Set data proper to response.data which will set all users into our Vue app.

and that’s it! Our users list is showing with the ages.

Show results in list

So this was a quick article on working with Vue.js 2.0 and ASP.NET Web API 2. If you have any queries, comment below and we’ll get right back to you.

Leave a Reply

Your email address will not be published. Required fields are marked *