Integrating Vue JS in Asp.Net Core Application


👤 Diwas Poudel    🕒 19 Jun 2021    📁 TECH

Vue JS is an open-source progressive Javascript Framework used for building user interfaces and a single-page application(SPA) and its popularity is increasing day by day comparing to other frameworks because of the following reason.

1 ) The size of Vue JS is very small about 18-21 KB and takes no time to download and use it.

2 ) The learning curve of vue js is easy to compare to other bigger framework so can quickly adoptable by a new user.

3 ) Vuejs has fantastic documentation and it will be easy to assist the new user.

4 ) Vuejs is easy to integrate into other applications and languages.

5 ) Vuejs uses an HTML-based templating syntax, allowing developers to write components easily and quickly. 

6 ) Vue.js provides two-way communications(Two-way binding) because of its MVVM architecture which makes it quite easy to handle HTML blocks.

7 ) Vuejs is fresh and has little baggage. It has been learning from the mistakes and successes of React & Angular.

Some of the popular website build with Vue JS are: Adobe Portfolio, Gitlab, Netflix, Behance, Xiaomi, Grammarly 

Nowadays Vue JS comes with in-built integration with the Laravel project and hopes to come the same in the Visual-Studio Asp.Net project in the near future.

Currently, we don't have in-built integration of Vue js in the current visual studio but don't worry I am here, I will guide you to integrates Vue js with the asp.net core project in the most simple ways.

Note: I am trying to describe the use of each and every step of integration so that this project might be longer. So don't feel bored.😎

I am using Visual Studio 2017 in this project

1 ) Before starting the project you must have install Node.js 

Check you have install node.js or not.

    Type node -v in command prompt and press enter

check node installed or not

I have already install Node JS so its showing version of node Js as v10.0.0

If you haven't installed then follow the below step

 Go to https://nodejs.org/en/download/ and download the latest version of node js, then install it in your computer.

nodejs website

After installing, go to the command prompt and double-check whether the node is installed or not.

Type node -v in command prompt then it should show its version. If a version is shown then let's move to the next step.

Note: While installing Node.JS, npm will get installed automatically.

Let's double-check it.

check npm installed or not

So we have successfully install node js and npm.

The main Work of npm(node package manager ) is to decentralized the node js framework for quickly installing applications and tools that we need.

1)Right-click on Project and select New Project and select asp.net core project and press the ok button

asp.net core project

2) then select (ASP.Net Model-View-Controller) project and press the OK button

mvc core project

3)Then our initial folder structure of the project looks like this.

folder structure of asp.net core

4)Open the project in an explorer-like this.

project in file explorer

Then open this folder location in command prompt and type npm init and press enter a command

npm init

Then press enter 9 times and write "yes" in command then enter

Then the package.json file will be created in the project 

package.json in asp.net core project

Use of package.json: all package install via npm will get be saved here.

Your package.json file might look like this:

   {
    "name": "integratingvuewithaspnetcore",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1"
    },
    "dependencies": {
        
    }
    }
      

5) Then in same command prompt type below command and press enter

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

babel loader, babel core and babel preset

Here we are installing babel-core, babel-loader, and babel-present. The main work of babel-loader is to convert your ES6 Javascript file into an ES5 file. We are transpiring (converting) because browser today's are not that advance to load es6 code so we transpile it to es5. Hope in future we should have to do these steps (Why think your self  innocent)

6)Then type the below command in the same command and press enter

 npm install -g webpack@3.10.0

This helps to install web packs globally so that we can access the web packs from anywhere on the computer.

Here, I have installed web pack 3.10.0 because this is a stable one, and no need to update other packages.

7)then type this in command and press enter:

 npm install --save-dev webpack@3.10.0

Installing web pack as dev dependency because it is required only on development time.

This web pack will create node_nodule where all packages install via npm will get installed there.

8) Now let's install vue, in the same command type below command and press enter

  npm install vue

This will install the latest vue js. You will find vue js installed in the node_module file.

9)Configuring Webpack Development Server

   In the project create webpack.config.js file as shown here : 

webpackconfig file

Open the webpack.config.js file and paste this code

module.exports = {
    entry: {
      // This index.js is main file which should include all other modules 
        app: ['./scripts/index.js']
    },
    output: {
        // this says : Compiled file goes to [name].js ie. app.js in my case
        path: __dirname + "/wwwroot/js/dist/",
        filename: '[name].js'
    },
    devtool: 'source-map',
    module: {
            // modules contains Special compilation rules 
            rules: [
            {   // Ask webpack to check: If this file ends with .js, then apply some transforms
                test: /\.js$/,
                // don't transform node_modules folder  this folder need not to be compiled and not needed at production mode
                exclude: /node_modules/, 
                // load this .js file using babel loader so as to make it compactible with any browser
                loader: 'babel-loader'
            },
                { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
                {
                    // Ask webpack to check: If this file ends with .css, then apply some transforms 
                    test: /\.css$/,
                    use: [ //  use css loader to load css file
                        { loader: "css-loader" }
                    ]
                }
        ]
    }
};

Actually, Webpack only knows js file so we must allow other resources like image file, .css file, .scss files, .ts files to be known to webpack, webpack need to compile and bundle those resources.

We can define the loaders and plugins that can be used to support the other languages that need to be compiled in the javascript. Here we are using CSS-loader as a loader.

Look there we have an entry point as index.js and we will use it later.

10) Create an index.js folder inside the Script folder as shown here

index bundle file

Note: If no Script folder present, then create it.

Then paste below the line in the index.js file 

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

index file

 

11 ) If done well run webpack in command and press enter 

run webpack

 Then you must get above the successful line of code. If you are not getting those lines then you have done mistakes somewhere else. If so, then try to fix the bug and move forward.

What we are doing here?

Running Webpack in the command line will compile your node_module file present in index.js and will create ES5 JS version (that all browser supports) in app.js file present in the dist folder. So We use this app.js file in _layout.cshtml file later. Here, the dist folder means "distribution" folder, where compiled code/library of all our packages present in the node module will get compiled and stored in app.js ( in my case).

12)Include this index.js in the Scripts session of your project. and now you can use vuejs in the MVC project. 

Open _layout.cshtml and paste this:

@
{
  Layout = null;
}

Ourtechroom



@RenderBody()
@RenderSection("scripts", false)

Then inside index.cshtml of HomeController paste this :

 

 
@section scripts{
    
}

final output

If you get this message then you are done. You are successful in integrating vue with asp.net core MVC application.

giphy

Enjoy and Happy coding.

 

Do the following things while publishing the project.

1) Goto index.js and replace 

import Vue from 'vue/dist/vue.js'

 with

import Vue from 'vue/dist/vue.min.js'

We must use a minified version of Vue js. And we already have that min file in the dist folder 

 

Other Related Posts:

Integrating postgresql with asp.net mvc