Vue.js and ASP.NET MVC
This is a very good starting point, but as we all now, apps grow in size very fast and managing scripts inside Views tends to get messy, not testable and very hard to read. Above that, it would be kind of nice to use NPM and some sweet ES6 features.
There are a couple of articles, such as this one on how to integrate Vue.js in .NET MVC projects in such a way so you can use NPM, but the setup is kind of complicated. The setup from the article above uses gulp, browserify and has some limitations such as supporting only
require syntax for handling assets.
We will try to bring together a pretty basic webpack setup and see how we can integrate it inside our MVC app. Webpack is the most popular module bundler these days and there are a lot of cool things you can do with it!
You can also find the sources inside this Github repo. When running it, we shall see 2 text messages like so:
Let’s add a
package.json and a
webpack.config.js and then run
npm install inside the directory where
package.json is located.
It might seem that the webpack.config is quite a long file and it’s probably hard to understand, but don’t worry. It actually does a lot for it’s size. Let’s go through the most important parts of it so we can understand what part does what.
Webpack configuration explanation
We will start with the first function
This function aims to generate a set of entries for webpack so webpack can process them. It basically loops through folders inside
Scripts/app and tries to add every
index.js file that it finds there. Let’s see how that folder looks actually
Now, every folder inside our
app folder which contains an
index.js can be processed by webpack.
We will jump to the next section of our config which is the output section
We specified here that, upon build we want each entry to be copied inside
Scripts/bundle folder with the exact name of the entry. This means that if we have a
home folder, it will provide a
home.js output inside the
npm run build to actually see the result. You should see a similar result to the one bellow.
So based, on the 2 folders we have inside
We will skip the next section which references some loaders. We, reference 4 loaders (vue, scss, css and js) so we can use
We have 2 more sections to cover, and the next one is the most magical thing which you might not get at first.
If you run
npm run dev inside the folder where
package.json is located, you should see an output simillar to this one:
Don’t worry about the
big warnings. These files are used in development mode only and their size doesn’t really matter for now.
If you go to
webpack-dev-server has a feature which can proxy requests from one url to another. In this case, every request from
http://localhost:5001 will be proxied to our
http://localhost:8086 . So, if we run our MVC app on
http://localhost:5001 and run
npm run dev , on port 8086 we should see the same output as from our MVC app.
Let’s actually try that:
Now, make sure the url we have specified in our proxy config, is the exact url your MVC web application is running on in order to make this work. You might ask yourself “Why do I need that?”. Well the answer is that if we want to reference scripts easily inside Views and also have Hot Reload which means that whenever you change some
js files your changes will be automatically pushed to your page without the need to REFRESH it!
Time to go through our last webpack config part which is the following one:
vue with a production version of it (basically
vue.min ) through
Time to CODE!
Let’s start by adding our HomeController
And then the View for it
We will display 2 messages inside the view. One which is sent from the controller and one rendered with
Vue We reference the script to be pointing at the
bundle folder, which, if you remember is specified in our webpack config:
path: path.resolve(__dirname, './Scripts/bundle/'),
This means that our assets will be served by webpack-dev-server to this path
Scripts/bundle in development and will be copied to the same path while building assets for production.
If you go to
http://localhost:8086 , you should see something simillar now:
We can now import it inside our index.js file and use it inside our View.
The Home View should look like this now
And the output would be something like this:
That’s pretty much it! We have now support for
.vue components, hot-reload and ES6 support with a single webpack config!
Bonus: Bootstrap + Sweet-Modal
As a bonus, we will add bootstrap and Sweet Modal vue component. Let’s get started by
npm install --save bootstrap sweet-modal-vue
Next, we will create a new folder inside our
layout together with an index.js file where we will import bootstrap like so
And then add the new script to our
_Layout.cshtml like so
Make sure you restart webpack
npm run dev , whenever you add new folders with
We will modify our
home/index.js file to use SweetModal
And then adjust our View a little bit
The output should be something simillar to the image bellow, upon clicking the button
Note that this configuration is not limited to .NET MVC. You can use a similar setup in any other MVC project such as PHP Laravel, Ruby on Rails and so on. Hope you found this useful and will have more confidence when thinking about Vue and MVC projects !