Features / Usability

Features / Usability

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

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.

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:


    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:


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
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:

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>
There are no comments at this time.

Upcoming Events

Tiki birthday
2)  19 Oct 2023 14:00 GMT-0000
Tiki Roundtable Meeting - October
3)  16 Nov 2023 14:00 GMT-0000
Tiki Roundtable Meeting - November
4)  21 Dec 2023 14:00 GMT-0000
Tiki Roundtable Meeting - December
5)  18 Jan 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  15 Feb 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7)  21 Mar 2024 14:00 GMT-0000
Tiki Roundtable Meeting
8)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting