In this tutorial we will learn about integrating vuejs with ASP.NET MVC. First of all let us understand what VueJs actually Is? According to official documentation Vue is a progressive framework for building user interfaces. Unlike monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand , Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combinationwith modern tooling and supporting libraries.
Vue was created by Evan You after working for google using AngularJS in a number of projects. He later summed up his thought process, "I figured, what if i could just extract the part that i really liked about Angular and build something really lightweight" . Vue was originally released in February 2014.
Now, Before any delay let's dive into the integration of VueJS in asp.net mvc. First of all create an empty project or mvc project as shown below.
Now, Here we selected MVC project but you can have your own choice. After that we can see the folder structure as shown below.
Now, its time to install the required node packages. For this open the project root folder(For this project its "D:\users\userName\documents\visual studio 2013\Projects\Integrating VueJS In ASP.NET MVC\Integrating VueJS In ASP.NET MVC" ) and open command prompt. In this tutorial i have assumed that you have already installed nodejs, if not please install nodejs first before continuing this tutorial. Now in your command prompt enter the following:
npm initafter this follow the instruction and then we can see the package.json file being created in our root directory. Now we also need babel related package in our project along with vue so we first install babel related package.
npm install --save-dev babel-core@6.26.3 babel-loader@7.1.5 babel-preset-es2015@6.24.1 babel-preset-stage-0@6.24.1Now, we also need webpack to be installed. Webpack is basically an open-source javascript module bundler.webpack takes modules with dependencies and generate static assets representing those modules. for installing webpack please enter the following command. for this tutorial we will be using webpack version 3.10.0 but you can install any of the available versions.
npm install -g webpack@3.10.0
npm install --save-dev webpack@3.10.0Now we will install vuejs using the following command:
npm install vueNow create webpack.config.js file inside the root directory of the project and paste the following code in it.
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']
}
}
]
}
};now inside an scripts folder create new file named index.js. because we are using this file name as an entry point in out webpack configuration file. and then inside the index.js file import the following package as shown below.
import Vue from 'vue/dist/vue.js';
window.Vue = Vue;now from the root directory of the project folder open command prompt and then type:
webpackAfter this we can see the dist folder being created inside the scripts folder. and inside dist folder we can see bundle.js file being created.
Now Include this bundle.js in the Scripts session of your project. and now you can use vuejs in mvc project.
So we are ready to use vuejs now. Here i am using vuejs code in Index.cshtml page as shown below.
and then we can see the following output after running the project.
In this way we successfully integrated vuejs with asp.net mvc and webpack.
