Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

frontend migration to vue3 #5121

Open
1 of 9 tasks
BacLuc opened this issue May 4, 2024 · 1 comment
Open
1 of 9 tasks

frontend migration to vue3 #5121

BacLuc opened this issue May 4, 2024 · 1 comment

Comments

@BacLuc
Copy link
Contributor

BacLuc commented May 4, 2024 •
edited
Loading

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.

  • 1. Add eslint rules for vue3, that we don't add new deprecated things, and can solve them step by step
  • 2. Fix them
  • 3. Replace svg integration, because our current svg integration does not work with vue3 frontend: replace vite-plugin-vue2-svg with vite-plugin-svg4vue #5173
  • 4. (Look if we can already use the vue3 compatible version of hal-json-vuex)
  • 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
@BacLuc
Copy link
Contributor Author

BacLuc commented May 4, 2024

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 added a commit to BacLuc/ecamp3 that referenced this issue May 4, 2024
@BacLuc
frontend: add vue/vue3-recommended rules
3386dcf 
That we are ready for vue3 as soon as the calendar works.
Issue: ecamp#5121
@BacLuc BacLuc mentioned this issue May 4, 2024
Closed
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 5, 2024
@BacLuc
frontend: add vue/vue3-recommended rules
d531e31 
That we are ready for vue3 as soon as the calendar works.
Issue: ecamp#5121
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 5, 2024
@BacLuc
frontend: add vue/vue3-recommended rules
8a2ddb8 
That we are ready for vue3 as soon as the calendar works.
Issue: ecamp#5121
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 5, 2024
@BacLuc
frontend: add lint rule for ":deep usage as a combinator has been dep…
c0bb89c 
…recated"

Issue: ecamp#5121
@BacLuc BacLuc mentioned this issue May 5, 2024
Merged
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 12, 2024
@BacLuc
frontend: add simple part of vue/vue3-recommended rules
2f7027b 
Turn off the following rules for now:
"vue/no-deprecated-dollar-scopedslots-api": "off",
"vue/no-deprecated-slot-attribute": "off",
"vue/no-deprecated-slot-scope-attribute": "off",
because i could not get the new syntax to work.

That we are ready for vue3 as soon as the calendar works.
Issue: ecamp#5121
@BacLuc BacLuc mentioned this issue May 12, 2024
Merged
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 12, 2024
@BacLuc
frontend: add tests for slot forwarding
1ce7844 
That we have tests when we turn the following rules on:
"vue/no-deprecated-dollar-scopedslots-api": "off",
"vue/no-deprecated-slot-attribute": "off",
"vue/no-deprecated-slot-scope-attribute": "off",

Issue: ecamp#5121

Related to: ecamp#5170, ecamp#5122
@BacLuc BacLuc mentioned this issue May 12, 2024
Merged
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 12, 2024
@BacLuc
frontend: replace vite-plugin-vue2-svg with vite-plugin-svg4vue
77a8b39 
Because vite-plugin-vue2-svg does not support vue3.
Only worked when converting vite.config.js to
an esm file by renaming it to .mjs.
vite-plugin-svg4vue is not the most popular package
for this, this would be https://www.npmjs.com/package/vite-svg-loader,
but that does not support vue2.

Issue: ecamp#5121

We can also wait to merge this short before we want
to upgrade to vue3.

Also fixes https://github.com/ecamp/ecamp3/security/dependabot/178
@BacLuc BacLuc mentioned this issue May 12, 2024
Closed
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue May 26, 2024
@BacLuc
frontend: replace vite-plugin-vue2-svg with vite-plugin-svg4vue
b6e80df 
Because vite-plugin-vue2-svg does not support vue3.
Only worked when converting vite.config.js to
an esm file by renaming it to .mjs.
vite-plugin-svg4vue is not the most popular package
for this, this would be https://www.npmjs.com/package/vite-svg-loader,
but that does not support vue2.

Issue: ecamp#5121

We can also wait to merge this short before we want
to upgrade to vue3.

Also fixes https://github.com/ecamp/ecamp3/security/dependabot/178
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue Jun 2, 2024
@BacLuc
frontend: add lint rule for ":deep usage as a combinator has been dep…
d31a12e 
…recated"

Issue: ecamp#5121
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue Jun 2, 2024
@BacLuc
frontend: add simple part of vue/vue3-recommended rules
8507f39 
Turn off the following rules for now:
"vue/no-deprecated-dollar-scopedslots-api": "off",
"vue/no-deprecated-slot-attribute": "off",
"vue/no-deprecated-slot-scope-attribute": "off",
because i could not get the new syntax to work.

That we are ready for vue3 as soon as the calendar works.
Issue: ecamp#5121
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue Jun 2, 2024
@BacLuc
frontend: add lint rule for ":deep usage as a combinator has been dep…
50847cf 
…recated"

Issue: ecamp#5121
BacLuc added a commit to BacLuc/ecamp3 that referenced this issue Jul 8, 2024
@BacLuc
frontend: replace vite-plugin-vue2-svg with vite-plugin-svg4vue
2cdf108 
Because vite-plugin-vue2-svg does not support vue3.
Only worked when converting vite.config.js to
an esm file by renaming it to .mjs.
vite-plugin-svg4vue is not the most popular package
for this, this would be https://www.npmjs.com/package/vite-svg-loader,
but that does not support vue2.

Issue: ecamp#5121

We can also wait to merge this short before we want
to upgrade to vue3.

Also fixes https://github.com/ecamp/ecamp3/security/dependabot/178

use v-html, because outputting the raw svg code into the element
does not work in production.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@BacLuc