Migration to vue3 (playground)

[usu]

Based on https://github.com/BacLuc/ecamp3/tree/frontend-update-vue3

This is not meant for merging (neither now, maybe also not later). More as a playground to see how much is needed to get vue3/vuetify3 running and hopefully test some core components. So use this playground with the risk that this branch might be discarded later.

Feel free to push directly to the branch if you make some progress.

Currently, only the following pages render partially (without styles and still with some warnings/errors):

• http://localhost:3000/#/login
• http://localhost:3000/#/camps (login functionality doesn't work yet; you need to login manually via API)

List of core components & packages to test:

• [ ] i18n
• [ ] hal-json-vuex / API
• [ ] vee validate
• [ ] VCalendar
• [ ] ...

Linter

~~According to https://vuetifyjs.com/en/getting-started/upgrade-guide/#setup, much of the migration could be done automatically by eslint-plugin-vuetify. I couldn't get this to run, though. Vue worked, but as soon as I'd enable vuetify rules, the linter wouldn't run through. Probably makes our life a lot easier, if we manage to fix this.~~ I was able to get this working when disabling the rule vuetify/no-deprecated-slots.

Potential pre-work

Potential pre-work which could limit the effort during actual migration

• use tailwind for utility classes (as propose by @manuelmeister below)
• break down global.scss into different categories (vuetify class overrides, utility classes, html default style overrides, ecamp specific global classes)
• change form components from options API to composition API

Vue

Migration guide: https://v3-migration.vuejs.org/

Vuetify

Migration guide: https://vuetifyjs.com/en/getting-started/upgrade-guide/#setup

VCalendar

In the current labs version (3.4.9) not really usable for us. Besides some rendering bugs, there are also several key features which have not yet been implemented, namely:

• Slots for day-label-header and event
• Ability to display an arbitrary number of days with a specific start and end date (i.e. v2 properties: type: "custom-daily", max-days, start, end)
• Ability to render overlapping events and customize the overlap strategy (i.e. v2 properties: event-overlap-mode)
• Mouse events necessary to implement drag & drop (i.e. v2 events: mousedown:event, mousedown:time, mousemove:time, moseup:time)

Current look:

Vuex

MIgration guide: https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html

Vee-validate

no migration guide found so far

[manuelmeister]

I'm testing the new vuetify. I think we could disable the utility classes and instead use tailwind which is more powerful, as currently often I create utility classes.

[usu]

I'm testing the new vuetify. I think we could disable the utility classes and instead use tailwind which is more powerful, as currently often I create utility classes.

Good point. Maybe something we could discuss next meeting, and in case we agree, something we could easily start with already before migrating to vue3 (hence limiting the migration effort).

[manuelmeister]

Core Meeting

• We will migrate in a hackathon weekend, at earliest in fall 2024, more likely in 2025.
• We want to migrate the functionality as is (except for clearly wrong behaviors / vue2 induced tech dept)
• We try to get as much prework done as possible; composition, errors, components, styles, hal-json-vuex

[BacLuc]

Replaced with

• https://github.com/ecamp/ecamp3/pull/8279