Fix "Unable to Find Package" NuGet Error in Visual Studio C#
🕤 09 Aug 2024 Read more
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
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.
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.
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
2) then select (ASP.Net Model-View-Controller) project and press the OK button
3)Then our initial folder structure of the project looks like this.
4)Open the project in an explorer-like this.
Then open this folder location in command prompt and type npm init and press enter a command
Then press enter 9 times and write "yes" in command then enter
Then the package.json file will be created in the 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
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 
)
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 :
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
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; 
11 ) If done well run webpack in command and press enter
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{
}
If you get this message then you are done. You are successful in integrating vue with asp.net core MVC application.
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:
-(1).jpg)
.png)
