Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application

Question

I am very new in VueJS

I have multi-page ASP.NET MVC app where I want to use VueJS (components, 2-way binding, validation, CRUD operations)

Currently using j

Answer 1

I was trying to set up Vue with ASP.NET MVC 5 (.NET 4.5, not Core!) by following a post published above by @Bert, but I have encountered many problems so I found another way:

(WARNING: if you want use vue.js with own components you need install node.js - for npm, webpack - for building bundles and vue-loader - for parsing *.vue files)

1. Install node.js
2. Run Node.js command prompt and navigate to your Visual Studio project folder (where is placed the *.csproj file)
3. Type: npm init -y and hit enter - it should generate packages.json file with dependencies and basic settings
4. Add necessary loaders for Vue (without these, *.vue files can't be parsed to javascript in bundle): npm install --save-dev vue-loader vue-template-compiler

5. Add webpack (globally) and save it in our package.json file:

   a) npm install -g webpack

   b) npm install –-save-dev webpack

6. Finally, add Vue.js to project: npm install --save vue

For now, my package.json looks like:

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

7. The next step is configuring webpack - go back to Visual Studio and add to project webpack.config.js file, and paste the following code to it:

module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './Vue/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

8. Add Vue folder to your project and place two files in it - index.js and App.vue:

index.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
});

App.vue:

9. Sample index.cshtml file:

@{
    ViewBag.Title = "Home Page";
}





@section scripts{
    
}

10. Go back to Node.js command prompt opened in 2) and run webpack by typing: webpack, hit enter and wait for build your bundle.js which you can find in ~/Vue/dist/bundle.js
11. Build your project in Visual Studio and run it.