Some dev notes about the VueJS integration
After some discussion at TikiFestMacau2019 we decided to add VueJS to Tiki for 21.x, and this enabled the first version of Tracker Field Rules.
Future Development
Some notes about where we may head in Tiki 24+ here: VueJS In Tiki Part 2
Next step after Hello World
Here, for the record, is my test wiki page that seems to work on that branch. It is based on this example.
Notes and Limitations
While building a Vue app in wiki plugins is an interesting experiment, and partially to aid my learning of how it all works, at some point we need to be able to support properly built VueJS projects (with npm)
The wiki plugin currently needs these changes from "normal" .vue file based projects:
- One vue plugin needs to have
app="y"as a parameter - The JS module files are outputted to the temp/public dir prepended with
vue_ -
@:shorthand doesn't work, we need to usev-on:for now - All
componentsobjects being exported need to have the component name as the object item key in lower case (i have no idea why), e.g.
Copy to clipboardcomponents: { componentname: ComponentName }
Some Ideas for the Future?
- https://bootstrap-vue.org/docs#browser
- https://rhwilr.github.io/vue-nestable/ (replacement for jquery-ui ones on menus, modules, toolbar admin, object perms pages etc)
- or https://github.com/phphe/vue-draggable-nested-tree (not so pretty and has a "pro" version)
- check https://github.com/FranckFreiburger/vue-calendar-picker (again to replace jquery-ui date picker (and datetimepicker)
- https://krystalcampioni.github.io/vue-hotel-datepicker (good for ranges, but not sure it does single dates)
- https://chronotruck.github.io/vue-ctk-date-time-picker/ favourite so far (there are lots!)