Integrating Vue JS in Asp.Net Core Application


👤 Diwas Poudel    🕒 Aug 24 2019    📁 Fix    📜 0 comment

 

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

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

2 ) 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 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 Laravel project and hopes to come same in Visual-Studio Asp.Net project in the near future.

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

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

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 below step

 Goto 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 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.

Main Work of npm(node package manager ) is to decentralized 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 ok button

asp.net core project

2) Then select (ASP.Net Model-View-Controller) project and press 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 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. Main work of babel-loader is converted your ES6 Javascript file into ES5 file. We are transpiring (converting) because browser today's are not that much 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 below command in same command and press enter

npm install -g webpack@3.10.0

This helps to install web pack globally so that we can access web pack 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 package install via npm will get installed there.

8) Now lets 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 node_module file.

9)Configuring Webpack Development Server

   In 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 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 mistake somewhere else. If so, then try to fix 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, dist folder means "distribution" folder, where compiled code/library of all our package 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 MVC project. 

Open _layout.cshtml and paste this:

@
{
  Layout = null;
}

<h2>Ourtechroom</h2>

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

Then inside index.cshtml of HomeController paste this :

 
<div id="app">
    <h1>{{message}}</h1>
</div>
@section scripts{
    <script>
                  new Vue({
                      el: '#app',
                      data: {
                          message: "Hello from ourtechroom.com" 
                      }
                  });
    </script>
}

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