VueJS Demo
These flows demonstrate how to build a simple, yet flexible front-end with VueJS.
VUE-REST
[get] /vue-rest
The demo app
[post] /vue-rest/post
Send data to server
[get] /vue-rest/data
Receive data from server
VUE-WEBSOCKET
[get] /vue-websocket
The demo app
[ws] /vue-websocket
The websocket handler
Written by Cory Guynn
[{"id":"6476a8e.5f5c7d8","type":"http in","z":"7c53234a.8a63f4","name":"","url":"/vue-websocket","method":"get","upload":false,"swaggerDoc":"","x":160,"y":400,"wires":[["e7476529.286988"]]},{"id":"9a38f41f.7cbbd8","type":"http response","z":"7c53234a.8a63f4","name":"","x":570,"y":400,"wires":[]},{"id":"3fbc496c.a37bc6","type":"function","z":"7c53234a.8a63f4","name":"kill msg","func":"msg._session=\"\";\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":520,"wires":[["5cb545e1.47ed0c"]]},{"id":"4fcd9a45.6572cc","type":"websocket in","z":"7c53234a.8a63f4","name":"","server":"ec1733fa.511358","client":"","x":200,"y":520,"wires":[["3fbc496c.a37bc6","a371b8e9.b98a08"]]},{"id":"5cb545e1.47ed0c","type":"websocket out","z":"7c53234a.8a63f4","name":"","server":"ec1733fa.511358","client":"","x":800,"y":480,"wires":[]},{"id":"1096087.12420f8","type":"comment","z":"7c53234a.8a63f4","name":"VueJS App","info":"","x":120,"y":360,"wires":[]},{"id":"3f382116.74223e","type":"inject","z":"7c53234a.8a63f4","name":"TEST timestamp","topic":"","payload":"","payloadType":"date","repeat":"3","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":480,"wires":[["5cb545e1.47ed0c"]]},{"id":"e7476529.286988","type":"template","z":"7c53234a.8a63f4","name":"VueJS Websocket","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<html>\n\n<head>\n\n</head>\n\n<body>\n\n <div id=\"container\">\n <input type=\"text\" id=\"container\" placeholder=\"enter text\" v-model=\"form.test\">\n <input type=\"text\" id=\"container\" placeholder=\"enter text\" v-model=\"form.test2\">\n <button @click=\"onSubmit()\">Send</button>\n <p>Connected: {{ isConnected }}</p>\n <br>\n <h4>Data</h4>\n <p>{{ value }}</p>\n\n \n </div>\n\n <script src=\"https://unpkg.com/vue\"></script>\n\n <script>\n\n new Vue({\n el: '#container',\n data() {\n return {\n form: {\n test: '',\n test2: ''\n },\n value: 'hello world',\n isConnected: false,\n wsUrl: \"ws://localhost:1880/websocket\"\n }\n },\n computed: {\n socket() {\n return new WebSocket(this.wsUrl);\n }\n },\n methods: {\n onSubmit() {\n let data = JSON.stringify(this.form);\n console.log('submitting data', data);\n this.socket.send(data);\n\n }\n },\n created() {\n this.socket.onopen = () => {\n console.log('socket open');\n this.isConnected = true;\n };\n this.socket.onclose = () => {\n this.isConnected = false;\n };\n this.socket.onmessage = (msg) => {\n console.log('socket message', msg)\n this.value = msg.data;\n };\n }\n });\n\n </script>\n\n</body>\n\n</html>","output":"str","x":390,"y":400,"wires":[["9a38f41f.7cbbd8"]]},{"id":"ec41d2d1.bc1278","type":"template","z":"7c53234a.8a63f4","name":"VueJS","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<html>\n\n<head>\n\n</head>\n\n<body>\n\n <div id=\"container\">\n <h2>VueJS REST Demo</h2>\n <b>Server Message:</b>\n <p>{{serverMsg}}</p>\n <h3>Form</h3>\n <input type=\"text\" id=\"container\" placeholder=\"enter text\" v-model=\"form.test1\">\n <input type=\"text\" id=\"container\" placeholder=\"enter text\" v-model=\"form.test2\">\n <button @click=\"onSubmit()\">Submit</button>\n <h4>Results</h4>\n <p>{{ value }}</p>\n </div>\n\n <script src=\"https://unpkg.com/vue\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js\"></script>\n <script>\n\n new Vue({\n el: '#container',\n data() {\n return {\n value: 'your post will appear here',\n form: {\n test1: '',\n test2: ''\n },\n serverMsg: ''\n }\n },\n methods: {\n onSubmit() {\n console.log('onSubmit this.form', this.form);\n axios.post('/vue-rest/post', this.form).then(res => {\n console.log('post res', res.data)\n this.value = res.data;\n });\n }\n },\n mounted() {\n axios.get('/vue-rest/data').then(res => {\n this.serverMsg = res.data;\n })\n }\n });\n\n </script>\n\n</body>\n\n</html>","output":"str","x":330,"y":700,"wires":[["7fd069c8.45ad"]]},{"id":"217f1271.9b814e","type":"debug","z":"7c53234a.8a63f4","name":"websocket msg received","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":670,"y":560,"wires":[]},{"id":"a371b8e9.b98a08","type":"json","z":"7c53234a.8a63f4","name":"","property":"payload","action":"","pretty":false,"x":450,"y":560,"wires":[["217f1271.9b814e"]]},{"id":"9e017db5.0bdac","type":"http in","z":"7c53234a.8a63f4","name":"","url":"/vue-rest","method":"get","upload":false,"swaggerDoc":"","x":130,"y":700,"wires":[["ec41d2d1.bc1278"]]},{"id":"7fd069c8.45ad","type":"http response","z":"7c53234a.8a63f4","name":"","x":550,"y":700,"wires":[]},{"id":"c4affef7.ef3d28","type":"http in","z":"7c53234a.8a63f4","name":"","url":"/vue-rest/post","method":"post","upload":false,"swaggerDoc":"","x":190,"y":800,"wires":[["468cc683.5f617","e8abc062.7ae0c"]]},{"id":"6b0136b5.eed778","type":"http response","z":"7c53234a.8a63f4","name":"","x":550,"y":800,"wires":[]},{"id":"468cc683.5f617","type":"debug","z":"7c53234a.8a63f4","name":"Vue POST","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":190,"y":840,"wires":[]},{"id":"e8abc062.7ae0c","type":"function","z":"7c53234a.8a63f4","name":"Apply timestamp","func":"msg.payload.timestamp = new Date().getTime();\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":800,"wires":[["6b0136b5.eed778"]]},{"id":"918a1277.19a93","type":"comment","z":"7c53234a.8a63f4","name":"Websocket","info":"","x":180,"y":440,"wires":[]},{"id":"bfe7c025.8bb6d","type":"comment","z":"7c53234a.8a63f4","name":"VueJS App","info":"","x":120,"y":660,"wires":[]},{"id":"52be54b8.144f14","type":"comment","z":"7c53234a.8a63f4","name":"Form Submit","info":"","x":170,"y":760,"wires":[]},{"id":"22fb7b05.d3fd8c","type":"http in","z":"7c53234a.8a63f4","name":"","url":"/vue-rest/data","method":"get","upload":false,"swaggerDoc":"","x":190,"y":940,"wires":[["dae0c987.c8abf8"]]},{"id":"c8e774d5.57d1a","type":"http response","z":"7c53234a.8a63f4","name":"","x":550,"y":940,"wires":[]},{"id":"dae0c987.c8abf8","type":"function","z":"7c53234a.8a63f4","name":"Sample Data","func":"msg.payload = new Date().getTime();\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":940,"wires":[["c8e774d5.57d1a"]]},{"id":"8954685d.aa2d58","type":"comment","z":"7c53234a.8a63f4","name":"Receive Data","info":"","x":170,"y":900,"wires":[]},{"id":"ec1733fa.511358","type":"websocket-listener","z":"7c53234a.8a63f4","path":"/websocket","wholemsg":"false"}]
