Home Why mixing Razor Pages and VueJs is a bad thing?
Reply: 2

Why mixing Razor Pages and VueJs is a bad thing?

Joel Pinto Ribeiro
Joel Pinto Ribeiro Published in 2018-02-09 12:42:33Z

I'm trying to setup a dot net core project with razor pages and include vueJs inside the razor page for all my logic .

Something like this :

    ViewData["Title"] = "VueJs With Razor";

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

     new Vue({
        el: '#app',
        data: {
          message : 'Hello vue.js'

But i have read that it's a bad practice, and that we should use Razor OR Vue component but not mix both.

Why is it bad ? i have read that server validation is harder mixing .

Thank you and sorry if my english is bad.



bbsimonbb Reply to 2018-02-09 14:53:29Z

You can do this. Sometimes you're obliged to do it, if, like us, you're migrating an existing code base and you can't convert everything at once. And as Ron C says, it works well.

If you're starting a new project, you have the luxury of choosing. Reasons for favouring an SPA and no Razor would be...

  • Reactivity. SPA apps generally feel (much) more reactive. Initial renders are often served from cache, before the data arrives. On first load, all resources arrive in a bundle, in one request-response. There's no, or much less, request chaining.

  • Workflow. Webpack, bundling and hot reloads are great. You get production builds, with minification, compilation of Vue render functions, elimination of 404 style errors, js syntax errors are trapped. The cycle from introducing an error to discovering it is greatly reduced for many errors.

  • SPA universe. Routing, Vuex, this really is the way of the future.

  • Purity. Razor and Vue do similar things at the end of the day. If you mix them, you may have a hard time keeping your head straight.

Ron C
Ron C Reply to 2018-02-09 13:39:48Z

I use Vue with razor for non SPA pages and the two work well together. I choose to use Vue by loading it via a script tag from a CDN and and I do not leverage the use of WebPack for transpiling, I simply write my code in (gasp) ES5. I chose individual pages rather than a SPA because it aids in SEO and search engine ranking of the pages. And I chose the non WebPack/non traspiling approach because it eliminates a whole stack of technology (Webpack and it's modules) from the learning curve.

The approach I chose still provides the reactive goodness to UI development that Vue inherently brings to the table.

I realize the my usage of Vue is quite different than going the route of a SPA and WebPack and the approach often means I can't use 3rd party Vue Components without reworking the code a bit. But the approach, simplifies the software architecture and delivers a lightweight reactive UI. And using this approach Razor can be leveraged to generate the initial rendering of the HTML with some tags containing vue attributes. Then after the page loads in the browser, Vue takes over and can reconfigure that page any way desired.

Obviously, this approach will not fit the needs of all developers or projects but for some use cases it's quite a nice setup.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.323401 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO