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 jQuery for DOM manipulation, Ajax requests etc

How should I approach this? I am getting way too much variations in thoughts from different posts (online)

Could anyone please guide me and give me some pointers to get started?

Some step by step doc will be great that shows how to do this with a hello world page (MVC View) with vuejs single file component and bundling

The bundling seems complicated process. But I would love to use LESS in my code

Thanks for reading

Answer 1

Extremely Basic

The most basic way to get started I know of with Vue in ASP.NET is just to include the Vue script in your project. You can use the vue.js Nuget package, which will add the Vue scripts to your Scripts directory and just include either the development or minified version in your MVC view.

<script src="~/Scripts/vue.min.js"></script>

Then in your view cshtml, just add a script block.

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

where #app refers to an element on your view. If you want to use a component, just add it to your script block.

<script>
    Vue.component("child", {
        template:"<h1>I'm a child component!</h1>"
    })

    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

and modify your Vue template.

<div id="app">
    {{message}}
    <child></child>
</div>

If you find yourself building a lot of components (which you likely will), extract them into a vue.components.js file or something similar, define all your components there, and include that on your views in addition to the vue script.

Using Single File Components

In order to use single file components, you need to integrate the node.js build process for single file components into your ASP.NET MVC build process.

Install node.js. After node.js is installed, install webpack globally.

npm install webpack -g

Add a package.json to your project. Here is what I use.

{
  "version": "1.0.0",
  "name": "vue-example",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "vue-loader": "^11.1.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "vue": "^2.2.1"
  }
}

I typically create a folder in my project to hold my Vue scripts and .vue files called Vue. Add a file to serve as the entry point for your Vue build process. We can call this index.js (or anything you want).

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

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

Create App.vue.

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

Add a webpack.config.js to your project. Here is what I use.

module.exports = {
    entry: "./Vue/index.js",
    output: {
        path: __dirname,
        filename: "./Vue/bundle.js",
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

This config specifies index.js as the entry point for webpack to figure out what to include in a bundle.js file, which will be compiled and put in the Vue folder.

In order to compile the bundle.js file whenever the project builds, I modify the project file to include the following.

<Target Name="RunWebpack">
  <Exec Command="npm install" />
  <Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>

This will install the necessary npm packages and then run webpack to build the bundle.js. This is necessary if you are building your project on a build server.

Now you just need to include the bundle.js file on a view that has an element with #app on it. You do not need to include vue.js or vue.min.js. That will be in the bundle.

Compile Individual Single File Components

We found there were times we wanted to use a single file component, but did not want to bundle it all into a single script. To do this, you mainly need only modify the webpack.config.js.

const fs = require("fs");
const path = require("path");

// build an object that looks like 
// {
//      "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
    const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };

    return fs.readdirSync(path.join(__dirname, "Vue"))
        .filter(file => file.endsWith(".vue"))
        .reduce(reducer, {});
}

module.exports = {
    entry: buildEntry(),
    output: {
        path: path.join(__dirname, "Vue"),
        filename: "[name].js",
        library: "[name]"
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

This webpack configuration will build a script file for every individual single file component. Then you can just include that script on a page where you are using the "Extremely Basic" technique above and use the component in your Vue by either exposing it globally or as part of the Vue. For example, if I have a Modal.vue, I would include Modal.js on the ASP.NET MVC view and then expose it to Vue by

Vue.component("Modal", Modal);

or

new Vue({
    ...
    components:{
        "Modal": Modal
    }
})

Webpack is very configurable, so you may want to take a different approach and build a single bundle for each page.

Finally, you can open a command line while you are developing and run

webpack --watch

in your project directly and your bundle(s) or individual components will be built every time you save them.