ecamp3 icon indicating copy to clipboard operation
ecamp3 copied to clipboard
verified publisher icon ecamp

frontend migration to vue3

Open BacLuc opened this issue 1 year ago • 1 comments

Plan to upgrade to vue3:

We already have a playground for vue3 in #4456 But that we also make some steps in the direction of vue3, here my proposal for a plan.

  • [x] 1. Add eslint rules for vue3, that we don't add new deprecated things, and can solve them step by step
  • [ ] ~~2. Fix them~~ @BacLuc went as far as he was allowed
  • [ ] 3. Replace svg integration, because our current svg integration does not work with vue3 https://github.com/ecamp/ecamp3/pull/5173
  • [ ] 4. (Look if we can already use the vue3 compatible version of hal-json-vuex). Maybe finish the following PR
    • https://github.com/ecamp/hal-json-vuex/pull/290
  • [ ] 5. ... do other small steps we can already do
  • [ ] use tailwind for utility classes
  • [ ] 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
  • [ ] 6. Switch to vue3 with a big bang, as soon as the calendar is ready

I have made a fork where we can run vue3 and vue2 alongside and are not bothered by the updates for the new frontend when we try new things for the vue3 frontend. https://github.com/BacLuc/ecamp3-vue3/

And here is a branch where i found all the places we need to switch from @import to @use in scss: https://github.com/BacLuc/ecamp3/tree/prepare-scss-vue3

BacLuc avatar May 04 '24 13:05 BacLuc

Current lint erros:


/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/activity/content/columnLayout/ResizableColumn.vue
  20:15  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/ButtonAdd.vue
  7:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/ButtonCancel.vue
  2:55  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/ButtonContinue.vue
  2:48  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/ButtonDelete.vue
  9:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/ButtonEdit.vue
  8:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/ButtonRetry.vue
  2:46  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/buttons/IconButton.vue
  7:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/collaborator/CollaboratorForm.vue
  33:24  warning  `<template v-for>` key should be placed on the `<template>` tag  vue/no-v-for-template-key-on-child
  59:26  warning  `<template v-for>` key should be placed on the `<template>` tag  vue/no-v-for-template-key-on-child
  71:24  warning  `<template v-for>` key should be placed on the `<template>` tag  vue/no-v-for-template-key-on-child

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/collaborator/CollaboratorListItem.vue
   2:72  warning  The `$listeners` is deprecated                                   vue/no-deprecated-dollar-listeners-api
  18:28  warning  `<template v-for>` key should be placed on the `<template>` tag  vue/no-v-for-template-key-on-child

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/dialog/DialogBottomSheet.vue
  7:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/dialog/DialogForm.vue
  9:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/dialog/DialogUiBase.vue
  12:16  warning  Props default value factory functions no longer have access to `this`  vue/no-deprecated-props-default-this
  24:16  warning  Props default value factory functions no longer have access to `this`  vue/no-deprecated-props-default-this

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiCheckbox.vue
  8:72  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiColorPicker.vue
  6:55  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiDatePicker.vue
  6:55  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiNumberField.vue
  6:55  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiRichtext.vue
  6:72  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiSelect.vue
  10:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiSwitch.vue
  8:72  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiTextField.vue
  6:55  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiTextarea.vue
  6:72  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/api/ApiTimePicker.vue
  6:55  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/BaseComponent.vue
  16:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue
  11:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ECheckbox.vue
  18:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/EDatePicker.vue
  23:9  warning  'v-model' directives require no argument  vue/no-v-model-argument

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ENumberField.vue
  20:50  warning  `slot` attributes are deprecated  vue/no-deprecated-slot-attribute
  20:63  warning  `slot-scope` are deprecated       vue/no-deprecated-slot-scope-attribute

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/EParseField.vue
   34:47  warning  `slot` attributes are deprecated  vue/no-deprecated-slot-attribute
   34:60  warning  `slot-scope` are deprecated       vue/no-deprecated-slot-scope-attribute
  114:14  warning  The `$listeners` is deprecated    vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ERichtext.vue
  19:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ESelect.vue
  20:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ESwitch.vue
  18:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ETextField.vue
  61:14  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/base/ETextarea.vue
  19:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/form/tiptap/TiptapToolbarButton.vue
  2:79  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/generic/CategoryChip.vue
   7:11  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api
  19:45  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/generic/DetailPane.vue
   4:5   warning  'v-model' directives require no argument  vue/no-v-model-argument
   7:11  warning  The `$listeners` is deprecated            vue/no-deprecated-dollar-listeners-api
  18:5   warning  'v-model' directives require no argument  vue/no-v-model-argument
  23:11  warning  The `$listeners` is deprecated            vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/generic/GenericChip.vue
  2:69  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/generic/LockUnlockListItem.vue
  2:43  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/layout/SidebarListItem.vue
  2:49  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/navigation/SideBar.vue
  5:5  warning  'v-model' directives require no argument  vue/no-v-model-argument

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/print/configurator/PagesConfig.vue
  17:64  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api
  49:77  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/print/configurator/PagesOverview.vue
  8:13  warning  The `$listeners` is deprecated  vue/no-deprecated-dollar-listeners-api

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/components/program/picasso/Picasso.vue
  33:19  warning  '.native' modifier on 'v-on' directive is deprecated  vue/no-deprecated-v-on-native-modifier
  34:18  warning  '.native' modifier on 'v-on' directive is deprecated  vue/no-deprecated-v-on-native-modifier

/home/lucius/projects/ecamp/ecamp3/main/frontend/src/views/camp/navigation/desktop/NavTopbar.vue
  9:11  warning  Filters are deprecated  vue/no-deprecated-filter

BacLuc avatar May 04 '24 13:05 BacLuc