Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

Forums » Features / Usability » How/Where to include/install and use foreign Vue components eg range slider from unpkg etc.?
 
Thread actions
Print this page
  • Print all pages

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

    Posted by Aris Bernotas 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

    Reads: 1973
    Posted by Aris Bernotas 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>
    Posted by Jonny Bradley posts: 126892 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...

    Posted by Aris Bernotas 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...


    Posted by Marc Laporte posts: 1644 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/

    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France
    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.

    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France
    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 ?

    Posted by Aris Bernotas 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.
    KanbanCapture.png (71.46 Kb)
    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France

    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.

    Posted by Aris Bernotas 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?

    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France
    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.

    Posted by Aris Bernotas 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...