Vue.js helpers in cshtml?

[RobertPaulson90]

Is it not possible to integrate Vue.js into a MVC project in a way, such that you can use all the Vue.js features directly in a .cshtml view? Or do you have to load it in with a template?

[MarkPieszak]

The way it's setup here is so that it Server renders Vue as well (through a node process) that's why we need the MVC portion.

Are you talking about mixing and matching Vue inside of MVC templates? You could but you'd lose a lot of benefits etc of having a SPA.

[RobertPaulson90]

Yes that's what I mean! I understand that I'd lose a lot of the SPA benefits, but at the moment during learning, I would simply like to use commands such as : to bind to html attributes and @ for events. Use { variable } to access data: and so on. At the moment, I get an error when loading the cshtml, because it can't be compiled due to not recognizing those commands

[anderly]

@amivit the simplest way to get started just learning vue would be to add the vue script tag to your layout file <script src="https://unpkg.com/vue/dist/vue.js"></script>.

Then in your Views/Home/Index.cshtml, place the following markup:

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

Below that in the same file or in your layout page then place the following:

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

This is all taken from the intro guide and you should be able keep following along in that tutorial to learn the basics.

[MarkPieszak]

I was just about to post this! 👾 Beat me to it :) I'll close this one out, but we can point to it incase others ask about this scenario as well.

[RobertPaulson90]

Much appreciated. My skill level is not too high yet, so I appreciate the example & link... Have a good weekend :)

[RobertPaulson90]

This doesn't quite work the way I'd like it to. I cannot bind to events or html attributes at all, with inline vuejs. Accessing data in {{ varName }} does work, but :src or @mousedown / v-on:mousedown do not work at all. The .cshtml won't compile @MarkPieszak @anderly

[anderly]

For just starting out, I would recommend using a single plain .html file with everything in it just to get the basics of vue down. Once you do that, then you can move on to breaking up that file and moving it into asp.net and cshtml layouts and views.

[anderly]

@amivit also, see http://vuecasts.com. Great free video series on learning Vue2. The author ends up using Laravel for some things starting in episode 23, but everything before that should give you a solid handle on Vue2.

[RobertPaulson90]

@anderly I am following a very nice course for vuejs 2 on udemy by Maximilian Schwarzmüller and have indeed been using a raw html file for the time being for learning,, but I still have love towards .Net and would like to at least know how to work with them both together. My "hack" for now is using ajax to inject my html with vuejs code into my .cshtml view. Ugly, so preferably I could use vuejs right in my .cshtml to begin with instead, so vue can make use of my MVC viewmodel.

I don't get why it has to be so hard, or impossible. But apparently .cshtml is not compatible with vuejs, from what I can gather... Seeing as no one on the internet has a solution.

So my conclusion is Vuejs only integrates with MVC if you are willing to drop using cshtml & razer. Why even bother integrating then? I find that difficult to understand.

[MarkPieszak]

Mainly because having them integrated here lets you still use a few things from .NET if needed. Also originally we had the template doing server-side rendering of the Vue app (in which case .NET renders your application to a string and sends it to the client through a Node process). Otherwise right now you can at least use .NET for your Rest API etc.

[anderly]

You can still use Vue with cshtml/razor if you don't want to go full SPA framework. You would simply use it the same way you might use Knockout.js with MVC. However, this repo is for a full SPA approach, essentially using .NET mainly for just the API and any prerendering. So, it depends on whether you want to go full-SPA (letting HTML, js, CSS take over all rendering) and interacting with a backend API (.NET) or whether you want to just use view to simplify some Ajax and data binding in an MVC app without the SPA aspects like client-side routing, state, etc. It's a matter of preference and what your goals are.

[anderly]

@amivit See this link on using mvc with Vue: http://www.lambdatwist.com/dot-net-vuejs/

[RobertPaulson90]

Thanks I appreciate the spoonfeeding and finally got it to work. I simply need to write v-on:mousemove instead of the @ shortcut (eg. @mousemove) and v-bind: instead of just :