Loading...
 
Features / Usability

Features / Usability


How/Where to include/install and use foreign Vue components eg range slider from unpkg etc.?

posts: 31 Lithuania

Hi all,
I am into the second week of trying Vue.js , 83 versions of VueJS example from Tiki, web sandboxes etc. I had been very happy with javascript, jquery. But now? My experience is that I had not seen more messed up with versions and flavours and bloated up (to several gigabytes of instalation) technology than this. Is ms typescript to blame? :-) And my guess is that's why there is not much of a progress with Kanban in Tiki during last 2 years or more? Anyway. Before giving up, I want to hear at least some hints. Or what do I need to put into a bin? Do I need to use npm or yarn for vue.js in tiki? npx? Bower, webpack? Or is it enough just composer to install some foreign vue.js components? Or just to copy e.g Multiselect.vue file somewhere like some Kanban *.vue files in /lib/vue-mf folder? But then it has a zillion dependencies...
I understand that we have vue version 3.2.29 now in tiki so the tiki info is outdated in here https://dev.tiki.org/VueJS-In-Tiki-Part-2 where it says "Some Points for Discussion
Upgrade to Vue.js 3.x?"?
I have installed Vue devtools for chrome. And I can debug php.
Btw, what does it mean vue-mf? And why 2 folders for vue in lib? Would we need to create one or more vue folders for other vue components? Or in what cases would be enough and how to add vue components in npm-assets folder? By editing package.json there or else? Would I need to build/transpile then? Etc. Etc..
Thanks in advance for any hints.
Aris

posts: 31 Lithuania
Aris Bernotas wrote:

Hi all,
I am into the second week of trying Vue.js , 83 versions of VueJS example from Tiki, web sandboxes etc. I had been very happy with javascript, jquery. But now? My experience is that I had not seen more messed up with versions and flavours and bloated up (to several gigabytes of instalation) technology than this. Is ms typescript to blame? :-) And my guess is that's why there is not much of a progress with Kanban in Tiki during last 2 years or more? Anyway. Before giving up, I want to hear at least some hints. Or what do I need to put into a bin? Do I need to use npm or yarn for vue.js in tiki? npx? Bower, webpack? Or is it enough just composer to install some foreign vue.js components? Or just to copy e.g Multiselect.vue file somewhere like some Kanban *.vue files in /lib/vue-mf folder? But then it has a zillion dependencies...
I understand that we have vue version 3.2.29 now in tiki so the tiki info is outdated in here https://dev.tiki.org/VueJS-In-Tiki-Part-2 where it says "Some Points for Discussion
Upgrade to Vue.js 3.x?"?
I have installed Vue devtools for chrome. And I can debug php.
Btw, what does it mean vue-mf? And why 2 folders for vue in lib? Would we need to create one or more vue folders for other vue components? Or in what cases would be enough and how to add vue components in npm-assets folder? By editing package.json there or else? Would I need to build/transpile then? Etc. Etc..
Thanks in advance for any hints.
Aris


A little bit more progress in vue.
MF - MicroFrontend.

And even more swear words... :-) From Readme in lib/vue-mf/root-config:

  1. Recommended IDE: :monocle_face:

VSCode(https://code.visualstudio.com/)

    1. VSCode extensions:

1. Volar(https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
2. ESlint(https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
3. Prettier(https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

All in one: Volar Extention Pack(https://marketplace.visualstudio.com/items?itemName=MisterJ.vue-volar-extention-pack)

  1. Installation:

In app folder /lib/vue-mf/(app) run:
```
npm install
npm run watch - development build
npm run build - production build
```

    1. Application builds are stored in:

```
/storage/public/vue-mf/
```

Note that shared libraries (vue and es-module-shims) are installed as devDependencies of root-config in /lib/vue-mf/root-config/package.json and copied into
storage/public/vue-mf/root-config
by /lib/vue-mf/root-config/rollup.config.js

they are made available through and importmap in teamplates/header.tpl

    1. Global Vue Micro Frontend configuration application dev path:

```
/lib/vue-mf/root-config/
```
Update:
In fact, there is another method without npm and NodeJS, if you want to use VueJS in tiki. I have not been able to test range slider yet but the following code works:
Taken from from: https://github.com/FranckFreiburger/vue3-sfc-loader

Copy to clipboard
{HTML()} <div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script> <script> const options = { moduleCache: { vue: Vue, }, getFile(url) { return fetch(url).then(response => response.ok ? response.text() : Promise.reject(response)); }, addStyle(styleStr) { const style = document.createElement('style'); style.textContent = styleStr; const ref = document.head.getElementsByTagName('style')[0] || null; document.head.insertBefore(style, ref); }, log(type, ...args) { console.log(type, ...args); } } const { loadModule, version } = window["vue3-sfc-loader"]; const app = Vue.createApp({ components: { 'my-component': Vue.defineAsyncComponent( () => loadModule('/storage/public/myComponent.vue', options) ) }, template: `Hello <my-component></my-component> <sub>from vue3-sfc-loader v${ version }</sub>` }); app.mount('#app'); </script> {HTML}


You just need access to your installation and put somewhere the myComponent.vue file like this

Copy to clipboard
<template> <span class="example">{{ msg }}</span> </template> <script> export default { data () { return { msg: 'world!', color: 'blue', } } } </script> <style scoped> .example { color: v-bind('color'); } </style>
posts: 126885 United Kingdom

Hi @Aris Bernotas

Sorry i haven't had time to even read this thread, or even done any work on Vue.js for weeks, the only thing i can chip in with is it seems to work ok in PhpStorm so you don't need VSCode really (in my limited experience)

Must go...

posts: 31 Lithuania
Jonny Bradley wrote:

Hi @Aris Bernotas

Sorry i haven't had time to even read this thread, or even done any work on Vue.js for weeks, the only thing i can chip in with is it seems to work ok in PhpStorm so you don't need VSCode really (in my limited experience)

Must go...


Thanks, @jonnybradley. I don't have PhpStorm and I mostly use simple editors like geany or terminal. When you have time, please tell about the idea of using vuejs without npm...


posts: 1630 Canada
Aris Bernotas wrote:
And my guess is that's why there is not much of a progress with Kanban in Tiki during last 2 years or more?


Kanban is working fine the last time I tested:
https://kanban.dev4.evoludata.com/

posts: 8632 Israel
Aris Bernotas wrote:

That a good news now. But then,
it is not working with on doc.tiki.org and it is not working with tiki 25 vcs.


https://doc.tiki.org/PluginKanban?highlight=kanban


I improved a bit and "things" are displayed but doesn't look like the expected result.

Hope to get a hand on a working sample to improve the documentation.

posts: 8632 Israel
Marc Laporte wrote:

Kanban is working fine the last time I tested:
https://kanban.dev4.evoludata.com/


Thank you @Marc Laporte, this look awesome and promising.

I did my own test and after cleaning a few errors due to settings I have a blank board with no further explanations about what may be missing (index rebuilted 😉 )

The only doc I could found is here : https://doc.tiki.org/PluginKanban

Is there more documentation somewhere I missed ?
Would it be possible to have a look at this board settings so I can improve the documentation ?

posts: 31 Lithuania
Bernard Sfez / Tiki Specialist wrote:

Thank you @Marc Laporte, this look awesome and promising.

I did my own test and after cleaning a few errors due to settings I have a blank board with no further explanations about what may be missing (index rebuilted 😉 )

The only doc I could found is here : https://doc.tiki.org/PluginKanban

Is there more documentation somewhere I missed ?
Would it be possible to have a look at this board settings so I can improve the documentation ?

Interestingly, if you import Kanban profile from tiki profiles and then switch some fields like this
Copy to clipboard
{kanban boardTrackerId=12 title="ktaskName" description="ktaskDescription" column="ktaskStage" swimlane="ktaskSwimlane" order="ktaskColumn" wip="15,10,5,30"}
, then you can get quite a decent result, but you can't update your tracker.
posts: 8632 Israel

Nice, I worked on an existing setup and I didn't used the wip="15,10,5,30"} part as it was not mandatory.

I'll give it a try tomorrow.

posts: 31 Lithuania
Bernard Sfez / Tiki Specialist wrote:

Nice, I worked on an existing setup and I didn't used the wip="15,10,5,30"} part as it was not mandatory.

I'll give it a try tomorrow.


After Marc gave me access to the docs tracker and things I fixed that kanban board... Now it shows correctly, I suppose? I created its own page page for that purpose. https://doc.tiki.org/DocsTodoKanbanByPriority. but I think, it would be a good idea to create separate boards for the same tracker but with different swimlanes eg. Assignees etc. And it would a fantastic feature to change that dynamically via buttons..
Also, we need to rethink/edit the fields and make use of that board... What do you think?

posts: 8632 Israel
Aris Bernotas wrote:
Also, we need to rethink/edit the fields and make use of that board... What do you think?


Hello Aris,

Sorry for the delay I missed this message. (but we discussed already in the chat)

I have created several tickets and wishes about Kanban and usage.

As it is now (Tiki25) and while it is awesome I don't have real life usage for end users (if you are admin it is usable but more complicate in overall Tiki registered user case).

The investment that was done here (by @Marc Laporte and Evoludata) is certainly already big and it has certainly been done with some plans concerning their own usage.

While I invested a good amount of time on testing and documenting it, I'm not investing a penny nor have a paying customer interested to say anything more or suggest about Kanban.

posts: 31 Lithuania
Bernard Sfez / Tiki Specialist wrote:

Hello Aris,

Sorry for the delay I missed this message. (but we discussed already in the chat)

I have created several tickets and wishes about Kanban and usage.

As it is now (Tiki25) and while it is awesome I don't have real life usage for end users (if you are admin it is usable but more complicate in overall Tiki registered user case).

The investment that was done here (by @Marc Laporte and Evoludata) is certainly already big and it has certainly been done with some plans concerning their own usage.

While I invested a good amount of time on testing and documenting it, I'm not investing a penny nor have a paying customer interested to say anything more or suggest about Kanban.


Thanks, @Bernard Sfez / Tiki Specialist! You are doing a great amount of things for tiki. But my approach is: ideas first - work and money next... :-) I see a lot more possibilities here with Kanban and VueJS , eg positioning of modules and/or other elements...


Upcoming Events

1)  21 Mar 2024 18:00 GMT-0000
Tiki Roundtable Meeting
2)  25 Mar 2024 17:00 GMT-0000
29th anniversary WikiBirthday (With Ward Cunningham)
3)  18 Apr 2024 18:00 GMT-0000
Tiki Roundtable Meeting
4)  16 May 2024 18:00 GMT-0000
Tiki Roundtable Meeting
5)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
8)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9) 
Tiki birthday
10)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting