Integrating Vue.js 2.0 to .NET MVC5 Project

Recently, I built a POC for PWA using Vue.js, Vuex, and Vuetify. I shared it with my colleagues and it was a blast I say. The demo I built was based on our existing MVC5 project which is responsive but not 100% mobile ready. We’ve been looking for a good solution that can cover both web and mobile and have come to an agreement that Vue.js and Vuetify could be our solution for future development.

After the session, some colleagues wanted to jump right on to Vue.js but there are some cases that we must consider before starting the actual development such as integration of Vue.js to .Net project, browser supports, and etc. For a small project we could start a new project using vue-cli separating all client code to vue.js project and convert existing mvc5 controllers to web apis. But for big projects we will have to include vue.js into existing projects and we had no idea whether this is even possible.

Thanks to google search, I could easily find some references about integrating Vue.js to .Net project as below.

Vue.js and ASP.NET MVC

Building Web apps with VueJS and .Net

But as always(not 100% but in most cases), our environments tend to defer from online cases that I cannot seamlessly follow the instructions(not blaming the original authors but I just needed detailed information to achieve the goal when I followed them). So I decided to provide a work through of how to integrate Vue.js 2.0 to .Net project from my own experiences and to be honest, this is more dedicated to my colleagues than general cases where my colleagues likely have higher chances having the same or similar dev environment as mine.

Create an ASP.NET Web Application project

We will start with a empty MVC project with following specification:

• Select Empty ASP.NET 4.5 Template.
• Select Add folders and core references for: MVC

Empty ASP.NET 4.5 Template with MVC folders and core references.

Solution explore after creating the empty ASP.NET MVC project.

Initialize Vue webpack bundle

Now that we have a clean starting point, open a terminal in the project folder.

Right click on Project and select “Open Folder in File Explorer”

Move up to parent folder and shift+right click to select “Open command window here”

You can also open Command window and move to project directory directly.

Run below command to install vue-cli globally.

npm install -g vue-cli

The following command will walk you through creating a package.json file installing vue-webpack-boilerplate.

vue init webpack-simple

A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction is provided by vue-cli webpack-simple tamplates.

Initializing vue-cli webpack template

Make sure package.json file is created in your project’s root folder as below.

Toggle Show all files to see the generated file in Solution Explorer.

Following command will start a dev server.

npm run dev

Open http://localhost:8080

Your first vue.js page

Now you are ready to code vue.js. But please hold on as we are here to integrate vue.js to MVC5.

Our existing mvc project has areas and we need to implement different components for each area. Consider that we have two areas named ‘first’ and ‘second’, we will have to write vue.js app named ‘first’ and ‘second’ as below.

Create first and second vue.js folder under /Scripts/app folder

Now we need to modify default webpack.config.js to change entry point and output point. We will take first and second folder under Script/app to produce bundling a compiled javascript.

var path = require('path')
var webpack = require('webpack')
var fs = require('fs')
var appBasePath = './Scripts/app/'
var jsEntries = {}
// We search for index.js files inside basePath folder and make those as entries
fs.readdirSync(appBasePath).forEach(function (name) {
  var indexFile = appBasePath + name + '/main.js'
  if (fs.existsSync(indexFile)) {
  jsEntries[name] = indexFile
}
})
module.exports = {
entry: jsEntries,
output: {
  path: path.resolve(__dirname, './Scripts/bundle/'),
  publicPath: '/Scripts/bundle/',
  filename: '[name].js'
},

...

Note that jsEntries array is filled with main.js folder names under Scripts/app/{areaname} folder and being entry point for the exporting.

Run below command to build our apps.

npm run build

Vue apps under Scripts/app will be compiled and bundled into Scripts/bundle with the respective names.

Compiled app will be published under Scripts/bundle folder.

When you are ready with the project setup, run below command.

npm run build

This command will compile vue apps and generates bundles in Scripts/bundle folder. Include these bundles into your cshtml.

Include bundle js file in cshtml file. Same goes fo second area.

Modify default layout template to have clean vue app layout.

Vue apps included in area.

If you want hot-reloading, add the following config to webpack.config.js

Proxy setup for current mvc project.

Note the port number after the localhost should match to mvc project port.

Now you are ready to use hot-reloading. Try npm run dev and go to one of your controller url.

Modify the route url to your mvc project controller.

Now if you change your vue app, hot-reloading will detect your changes.

Changed first vue app and saved.

Your first app will be refreshed with new contents.

The sample code is located at my github repository.

hyounoo/vue-to-mvc5

Thanks for reading.