Vue Support

[joshua1]

Hi @dsuryd ,
Any chance you would support Vue.js ? the lib seems to be dependent on jQuery. any chance that dependency be optional?

[dsuryd]

Vue is on the radar; priority depends on whether there's enough interest. Meanwhile, see issue #30 for possible workaround.

Starting from v2.0.6 beta, dotnetify-react already has optional dependency to full jQuery and depends only on jquery-deferred. In the absence of jQuery, it will use the included jquery-shim.

[joshua1]

@dsuryd Thanks for the response, there definitely will be enough interest if there isnt enough already. i will look at #30.

[desarrollo03TR]

Vue is really good, it would be nice to have vue support.

I guess we can connect a vm to Vue this way:

let myState = {};

new Vue({
	el: '#app',
	data: {
		vm: dotnetify.connect("MyVM", { 
                     getState: () => myState,
                     setState: newState => Object.assign(myState, newState)
                }),
        },
})

Well, it "works", but with a lot of errors in the console. I guess dotnetify is waiting some response from the JavaScript side.

$vm0.vm.State().MyMessage

The output is right (MyMessage is a property from the ViewModel).

[stevehayles]

Nowhere to vote as such, but wanted to add a big 'thumbs up' to any potential Vue integration.

Lots of similarities between Vue and React and the discussions and arguments could go on forever but Vue has a very quick learning curve and is easier to port applications built on similar 'template' style frameworks like Angular.

[dsuryd]

I haven't learned Vue yet, but if there's anyone with Vue experience willing to collaborate, we can get this started. I will need your help creating the equivalent of WebApplication.React but with .vue files and vue material UI.

[desarrollo03TR]

I'll try to implement something.

[desarrollo03TR]

I think this can help. You can add reactive properties to a Vue instance (a Vue instance is like the main react component) after creation.

For example, this Vue instance:

new Vue({
  el: '#app1',
  data: {
	message: 'Hello world',
        age: 23,
  }
})

Can be re-created this way:

new Vue({
  el: '#app2',
  data: {
	vm: {}
  },
 created: function() {
 	this.$set(this.vm, 'message', 'Hello world');
 	this.$set(this.vm, 'age', 23);
 }
})

The this.$set function can add reactive properties to the Vue instance.

You can try with this html code:

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app1">
  <div>
	<div>Message: {{ message }}</div>
	<input v-model="message">
	<div>Age: {{ age }}</div>
  </div>
</div>

<div id="app2">
  <div>
	<div>Message: {{ vm.message }}</div>
	<input v-model="vm.message">
	<div>Age: {{ vm.age }}</div>
  </div>
</div>

[desarrollo03TR]

Well, it works. From the Hello world demo:

Mensaje: Hello World!
Server Time: 2018-04-26T17:08:28.1936979-06:00
{
  "vm": {
  "state": {
      "$vmId": "HelloWorld",
      "$component": null,
      "$requested": true,
      "$loaded": true,
      "$itemKey": {},
      "User": {
        "Name": "World"
      },
      "Greetings": "Hello World!",
      "ServerTime": "2018-04-26T17:08:28.1936979-06:00"
    }
  }
}

The js file:

import Vue from 'vue/dist/vue.js';
import dotnetify from 'dotnetify';

new Vue({
    el: '#app',
    data: {
        vm: {},
        state: {}
    },
    created: function () {
        this.vm = dotnetify.connect("HelloWorld", {
            getState: () => this.state,
            setState: newState => {
                Object.assign(this.vm, newState);
                this.$set(this.state, 'Greetings', this.vm['Greetings']);
                this.$set(this.state, 'ServerTime', this.vm['ServerTime']);
            }
        })
    },
    beforeDestroy: function () {
        vm.$destroy();    
    }
})

But the server time property is not updating.

EDIT: It is updating now :) I think that I can create the WebApplication.Vue.

[westonsoftware]

Very interesting, I'd like to try the same thing with Vue, any progress on this? (I really don't know much React but I did do some Vue recently)

[jaredthirsk]

Hi, it has been a couple of months since last comment -- wondering if anyone has started work on this. I'm leading my .NET team into Vue because of its ease of (incremental) adoption and dotNetify could also be a good fit.

Vue stack that I love, FWIW: Vue Vuex Quasar. I wonder if Vuex would make any sense for dotNetify -- anyone have thoughts?

[westonsoftware]

Hi, I just spent the last week learning Quasar + Vuex and I think it's pretty awesome. I could see doing something like "quasar new store 'controller' " and then figuring out how to dotnetify that. Worth looking into at least.

[DotNetDevlll]

Noticed its moved to the planned state on the roadmap, Dsuryd thank you :)
Looking forward vue support!

There is any chance to be supported at this year?

[dsuryd]

Thank you, the target is sometime next month.

[dsuryd]

Vue support is provided starting v3.2.