Integrating VueJS in ASP.MVC Application

VueJS is a javascript framework that is on fire these days. Building VueJS single page application is easy and a ton of example can be found on the web. In this article, I will show how you can integrate Vuejs in multi-page ASP.NET MVC application. This kind of setup can be used in web applications instead of using jquery. Each page has its separate Vue instance and the Vue Components can be integrated to these instances.

First of all let us create an empty ASP.NET MVC project. I am using Visual Studio 2017 Community Edition for this tutorial.

Creating a new Web Application Project

Also, select empty project while creating the application:

Selecting empty Template

Now after creating the empty ASP.NET MVC project, your solution explorer looks like this:

Now, we are ready to install the required node packages. For this purpose, start your command line and cd into the project root directory. I have already installed command prompt inside visual studio and it is available in the tools menu. You can follow this tutorial from microsoft to install the command prompt inside visual studio. If all things go well, command prompt will be available in tools menu. Selecting the command prompt will open it in the root folder of the project.

If you are unable to install command prompt inside visual studio, then you can run the command prompt externally and cd into the project root folder. You can find the root folder of your project by right clicking the solution and clicking “Open folder in File Explorer”.

Note: It is also important that sometimes nodejs requires elevated command prompt to install scripts, so its better to run VS 2017 in Administrator mode.

For external command prompt, right click the application icon and run as administrator.

Now, its time to run some scripts. I am going to use npm as my package manager and so the installation of nodejs is required. You can go to official nodejs site to install it.

After the installation of nodejs, npm is available by default. Now in your project root folder, run the following script:

npm init

This command will create a “package.json” file in the root folder for the management of packages that are to be installed in the project. Now, I am going to use es2015 in the project to import packages alongside vuejs, so packages related to babel are also needed. However, these packages are needed only in development environment so enter the following command:

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0

This command will install es2015 alongside babel loader. Also, I am going to use webpack, so the installation of webpack as dev dependency is also needed. It is better to install webpack globally in node environment. However, we have to list webpack as dev dependency in each project as well.

npm install -g webpack
npm install --save-dev webpack

Now, its time to install vuejs using the following command:

module.exports = {
    entry: './scripts/index.js',
    output: {
        filename: './scripts/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'stage-0']
                }
            }
       ]
    }
};

The above code is pretty straight forward. We are defining the entry file for the webpack and also the output where we can throw the bundled packages. Entry point means the file where all the packages are imported and necessary configurations are done. The above configuration is done in webpack.config.js. Now, create a scripts folder and also create an “index.js” file inside it. In this file enter the following code:

import Vue from 'vue/dist/vue.js';
window.Vue = Vue;

What I am doing in “index.js” is importing vue package and declaring the imported variable globally by attaching it to window variable. There are also methods for defining the global variables in webpack.

Now, If all things go well, run the command “webpack” in the command prompt. This will generate a “dist” folder inside scripts folder and a file “bundle.js” inside “dist” folder. If you open this “bundle.js” file, you can see that webpack has imported the vue package inside this file. This is the file that is to be included in the layout page of our MVC app.

Now, Inside this “views/shared” folder, create “_layout.cshtml” with following code:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Vuejs with ASP MVC</title>
        <script src="~/scripts/dist/bundle.js"></script>
    </head>
    <body>
        @RenderBody()
        @RenderSection("scripts", false)
    </body>
</html>

Here, in the layout page, I have included the bundle.js file which consist of vue package. Also I have defined the RenderBody() method to load the page contents and RenderSection() method to load script from other pages.

Now, create a “HomeController” inside inside Controllers folder. Also, right click the Index Action to create its view page. In the Index.cshtml page paste the following code.

<div id="app" v-cloak>
    <p>{{message}}</p>
</div>
@section scripts{
<script>
    new Vue({
        el: '#app',
        data: {
            message: "Hello from VueJS in ASP MVC"
        }
    });
</script>
}

In this page, I have instantiated the Vue and defined a variable “message” to display message from Vue.

Also, all the code used in this tutorial can be found in this github link.

Specially, this type of setup is used in multi-page apps where you can replace the usage of jquery.