How to setup Vue Js in Asp.net Core MVC

These guide is straightforward to help folks like me who want to setup vue js  in Asp.net Core. Be sure node js is installed, if not download it here.

1. Setup the npm configuration file ( package.json )

Below is the npm package I will use.

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vuex": "^2.1.1"
  }
}

2. Install the npm package

Open command prompt and go to the root folder of your application and install the npm packages set from your package.json using the command ‘npm install’ without the quotes.Below is the sample how it look.

3. Setup Gulp

Once npm package is installed you may now setup the gulp file. You will need to add new item called gulp configuration file ( gulpfile.js ). Later on we will create the vue js which we will call it vueApp.js same with the code below. The first argument is where the public output directory and the other one is the source directory for more details on the webpack click here.

var elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});

4. Create the Vue js file

On your asp.net core web app project solution explorer goto wwwroot and add ‘js’ folder and if it does not exist then add again a new folder name ‘dist’. Now once the folder setup is complete add a new javascript file in the ‘js’ folder name it ‘vueApp.js’. Below is the folder structure.

5. Start coding in your vue js file

You may now start coding, as for the example below we will be display alert to indicate that vue js is running.

import Vue from 'vue'

new Vue(
    {
        el: '#app',
        data() {
            message:'hello world using vue js on Asp.net core mvc!'
        },
        mounted() {
            console.log(this.message);
        }
    });

6. Apply vue js on to your razor view or html

Open your layout page and wrap the content of your body tag with a div and an id of ‘app’. We will use app since that is the id tag we used on our sample code from step 5. The ‘app’ is not required and you may change upon your desired name. Lastly on applying the vue js to file add reference now to the script. Be sure to move outside the div app the scripts reference to prevent error.

7. Run gulp

Now that we have set up the vue js configuration and apply it to our razor view we will need to run gulp to to execute what we have set in our gulpfile. Like in step 2 goto your root folder and open command prompt then execute the command ‘npm run dev’ again without the quotes. For more details regarding the gulp watch command click here.

8. Run

Now for the final step run your asp.net core mvc app and check the console of your web browser. You should be able to see now the message we set from step 4.