TACTIC Open Source
Using Vue.js in Tactic - Printable Version

+- TACTIC Open Source (http://forum.southpawtech.com)
+-- Forum: TACTIC Open Source (http://forum.southpawtech.com/forumdisplay.php?fid=3)
+--- Forum: TACTIC Discussion (http://forum.southpawtech.com/forumdisplay.php?fid=4)
+--- Thread: Using Vue.js in Tactic (/showthread.php?tid=205)

Using Vue.js in Tactic - Diego - 03-09-2021

Hi all!
I just wanted to share the result of a little experiment I did to use Vue.js in Tactic

First of all we need to include vue.js, edit "tactic_data/config/tactic-conf.xml" and add:

Code:
<include_js>
https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
</include_js>

this will work only if your browser have internet access, in a closed LAN you will have to internalize Vue.js, just put it anywhere your browser will have access to it (for example in tactic/src/context/ or in a plugin folder)

Than we restart Tactic and create a new custom layout.
In the HTML tab we enter:

Code:
<div id="vue_test" class="app_div">
    {{ message }}
</div>

than we create e new behavior, for the load event on "app_div" (or whatever name you chose for the div class):
 
Code:
var app = new Vue({
    el: '#vue_test',
    data: {
        message: 'Hello World!'
    }
});


That's all!

Running the new custom layout should display "Hello world" in place of the {{ message }}

I believe with Vue.js and tactic.js we can add modern and easy to create/maintain UIs

Few notes:
- The "vue_test" app creation can be added to the onload event of any div as long as the div comes before the vue_test div
- I still didn't do any extensive test but Vue.js seems to get along with the rest of tactic js logic very well
- I also managed to use GoldenLayout (nice modern layout in js) and BabylonJs (I use it to show assets 3D models in realtime), just add them to "tactic_data/config/tactic-conf.xml"

Code:
<include_js>
https://cdn.babylonjs.com/viewer/babylon.viewer.js,https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js,https://golden-layout.com/files/latest/js/goldenlayout.min.js
</include_js>

<include_css>
https://golden-layout.com/files/latest/css/goldenlayout-base.css,https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css
</include_css>

- I can't be sure there are not going to be any interferences between all the involved JS libraries but in my (small) tests worked very well

RE: Using Vue.js in Tactic - listy - 03-10-2021

Oh! This is really useful!

Do You have any github repo for that? Like Celton's

RE: Using Vue.js in Tactic - listy - 03-10-2021

I want to make something similar to TACTIC Portal with vue js. Some UI for a user, where he can just see his tasks, notes and make quick checkins

RE: Using Vue.js in Tactic - listy - 03-12-2021

Something like this, with all tasks, scenes, files and etc for daily work: https://store.vuetifyjs.com/products/vuetify-material-dashboard-free/preview