.NET MVC, Webpack and Vue.js — Part 5— Vue.js

This part of the serie, I show how I put Vue code with ES6 modules approach

• Part 1 — Tools;
• Part 2 — Project structure;
• Part 3 — NPM Packages;
• Part 4 — Webpack Configuration;
• Part 5 — Vue.js;
• Part 6 — Vuex;

Now, we will add Vue.js in our application. We have installed it in the Part 3.

It’s the easiest part. Create a directory inner ~/public/src/js, I called it home and create a index.js file:

Directory for the Home/Index view

Import the Vue.js library and create a new instance for it:

index.js file with new Vue instance

Now, change our Home/Index.cshtml to make the references for js file. Add the id to the div that you want to transform in a Vue app.

run at the CMD/PowerShell console:

npm run build

Don’t forget to include new files to the project. Run debug:

The MVC app running with Vue.js

Beautiful!

Next post, I’ll show you how to use Vuex and keep state between page reloading.

See ya!