How can we integrate Vue JS with ASP.NET MVC and nuget packages

Question

How can we integrate Vue JS with MVC Project that is existing and using with Nuget Package.

Tried with below approach.

<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
    { { message }}
</div>
<script>
    var aboutPage = new Vue({
        el: '#aboutPage',
        data: {
            message: 'Hello Vue! in About Page'
        }
    });
</script>

Question:

Is there need for any additional package like - webpack or gulp, we already have bundle config of MVC?

2. How can we create separate files or design for each view like:

To separate the service call (to call web api from client side)
separate out the template file.
methods or logic to write in JS.

any example for MVC with VueJS like - controller, view,service, vue JS file is great..

Thanks a lot !

marc_s · Accepted Answer · 2024-12-21 11:25:43Z

You can use vuejs buy adding it to your layout.

 @Scripts.Render("~/node_modules/vue/dist/vue.min.js")

You need to install Nodejs on your machine to use NPM and ES6 features.

For integrate Vue.js in ASP.NET MVC you need module bundler (webpack, gulp),can choose one of this options, the popular is webpack:

(Gulp, Browserify), which has some limitations such as supporting only require syntax handling assets. and the setup is kind of complicated.
(Webpack), which has a lot of cool things you can do with it, Hot Reload. check this repo by using webpack, you config it to handle just js files and it will handle js files for build too , upon build each entry will be copied inside Scripts/bundle, also you need some loaders such ass (vue, scss, css and js) for webpack. check this

Webpack uses webpack-dev-server for development which is basically a node.js based server which serves assets (javascript, css etc) that our browsers can interpret. Usually these assets include some development friendly features like Hot Reload. These assets are not minified and are quite different from the ones generated when building for production.

devServer: {
proxy: {
    '*': {
        target: 'http://localhost:5001',
        changeOrigin: true
    }
}
},

webpack-dev-server has a feature which can proxy requests from one url to another. In this case, every request from "webpack dev server " will be proxied to your "ASP.NET MVC server". So, if we run our MVC app on http://localhost:5001 and run npm run dev , on port 8086 you should see the same output as from our ASP.NET MVC app.

Answers:

Yes you have to setup Webpack or Gulp.
By using webpack you can all thing for file structure that you want check this tree

-app --libs ----utils ----components ---------commons ---------....... -----pages ---------.....

Check these articles:

Danijel · Accepted Answer · 2018-11-08 17:57:03Z

0

If you want to keep the .cshtml files and use MVC as a multipage application, you can take a look at this template as an example or starting point. https://github.com/danijelh/aspnetcore-vue-typescript-template

You can create modules of pages which you want to enhance with Vue and import that bundle.

answered Nov 8, 2018 at 17:57

Danijel

1,1858 silver badges15 bronze badges

Collectives™ on Stack Overflow

How can we integrate Vue JS with ASP.NET MVC and nuget packages

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related