Migration Vue3: step 1 compat mode

app/.eslintrc.js

@@ -5,14 +5,23 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/strongly-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'eslint:recommended',
     'plugin:prettier/recommended',
   ],
   rules: {
-    'no-unused-vars': [
-      'warn',
-      { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
-    ],
+    // 'no-unused-vars': [
+    //   'warn',
+    //   { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
+    // ],
+    // temp vue3 compat3
+    'vue/no-v-for-template-key-on-child': 'error',
+    'vue/no-v-for-template-key': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/v-on-event-hyphenation': 'off',
+    // temp flemme
+    'vue/require-explicit-emits': 'off',
+    'vue/require-default-prop': 'off',
+    'no-unused-vars': 'off',
   },
 }

app/package.json

@@ -13,31 +13,33 @@
     "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^4.5.13",
-    "@fontsource/firago": "^4.5.3",
-    "bootstrap-vue": "^2.22.0",
-    "date-fns": "^2.29.3",
+    "@fontsource/fira-code": "^5.0.17",
+    "@fontsource/firago": "^5.0.7",
+    "@vue/compat": "3.3.4",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
+    "bootstrap-vue": "^2.23.1",
+    "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "^2.7.14",
-    "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
-    "vue-showdown": "^2.4.1",
-    "vuelidate": "^0.7.7",
-    "vuex": "^3.6.2"
+    "vue": "3.3.4",
+    "vue-i18n": "^9.10.1",
+    "vue-router": "^4.3.0",
+    "vue-showdown": "^4.2.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "bootstrap": "^4.6.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.22.0",
     "popper.js": "^1.16.0",
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
-    "sass": "^1.60.0",
-    "vite": "^4.2.1"
+    "sass": "^1.71.1",
+    "vite": "^5.1.4"
   },
   "browserslist": [
     "> 1%",

app/src/App.vue

@@ -6,7 +6,6 @@
         <BNavbarBrand
           :to="{ name: 'home' }"
           :disabled="waiting"
-          exact
           exact-active-class="active"
         >
           <span v-if="theme">
@@ -45,10 +44,12 @@
       <main id="main">
         <!-- The `key` on RouterView make sure that if a link points to a page that
         use the same component as the previous one, it will be refreshed -->
-        <Transition v-if="transitions" :name="transitionName">
-          <RouterView class="animated" :key="routerKey" />
-        </Transition>
-        <RouterView v-else class="static" :key="routerKey" />
+        <RouterView v-slot="{ Component }" :key="routerKey">
+          <Transition v-if="transitions" :name="transitionName">
+            <Component :is="Component" class="animated" />
+          </Transition>
+          <Component v-else :is="Component" class="static" />
+        </RouterView>
       </main>
     </ViewLockOverlay>
 
@@ -100,6 +101,7 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {
@@ -225,15 +227,15 @@ main {
   .animated {
     transition: all 0.15s ease-in-out;
   }
-  .slide-left-enter,
+  .slide-left-enter-from,
   .slide-right-leave-active {
     position: absolute;
     width: 100%;
     top: 0;
     transform: translate(100vw, 0);
   }
   .slide-left-leave-active,
-  .slide-right-enter {
+  .slide-right-enter-from {
     position: absolute;
     width: 100%;
     top: 0;

app/src/api/errors.js

@@ -10,7 +10,7 @@ class APIError extends Error {
     super(
       error
         ? error.replaceAll('\n', '<br>')
-        : i18n.t('error_server_unexpected'),
+        : i18n.global.t('error_server_unexpected'),
     )
     const urlObj = new URL(url)
     this.name = 'APIError'
@@ -39,7 +39,9 @@ class APIErrorLog extends APIError {
 // 0 — (means "the connexion has been closed" apparently)
 class APIConnexionError extends APIError {
   constructor(method, response) {
-    super(method, response, { error: i18n.t('error_connection_interrupted') })
+    super(method, response, {
+      error: i18n.global.t('error_connection_interrupted'),
+    })
     this.name = 'APIConnexionError'
   }
 }
@@ -57,15 +59,15 @@ class APIBadRequestError extends APIError {
 // 401 — Unauthorized
 class APIUnauthorizedError extends APIError {
   constructor(method, response, errorData) {
-    super(method, response, { error: i18n.t('unauthorized') })
+    super(method, response, { error: i18n.global.t('unauthorized') })
     this.name = 'APIUnauthorizedError'
   }
 }
 
 // 404 — Not Found
 class APINotFoundError extends APIError {
   constructor(method, response, errorData) {
-    errorData.error = i18n.t('api_not_found')
+    errorData.error = i18n.global.t('api_not_found')
     super(method, response, errorData)
     this.name = 'APINotFoundError'
   }
@@ -83,7 +85,7 @@ class APIInternalError extends APIError {
 // 502 — Bad gateway (means API is down)
 class APINotRespondingError extends APIError {
   constructor(method, response) {
-    super(method, response, { error: i18n.t('api_not_responding') })
+    super(method, response, { error: i18n.global.t('api_not_responding') })
     this.name = 'APINotRespondingError'
   }
 }

app/src/components/AdressInputSelect.vue

@@ -2,24 +2,24 @@
   <BInputGroup v-bind="$attrs">
     <InputItem
       :id="id"
-      :value="value.localPart"
+      :modelValue="modelValue.localPart"
       :placeholder="placeholder"
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
-      @input="onInput('localPart', $event)"
+      @update:modelValue="onInput('localPart', $event)"
       @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
-      <BInputGroupText>{{ value.separator }}</BInputGroupText>
+      <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
     </BInputGroupAppend>
 
     <BInputGroupAppend>
       <SelectItem
-        :value="value.domain"
+        :modelValue="modelValue.domain"
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
-        @input="onInput('domain', $event)"
+        @update:modelValue="onInput('domain', $event)"
         @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
@@ -39,13 +39,13 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,
 
   props: {
-    // `value` is actually passed thru the `v-model` directive
-    value: { type: Object, required: true },
+    modelValue: { type: Object, required: true },
     choices: { type: Array, required: true },
     placeholder: { type: String, default: null },
     id: { type: String, default: null },
@@ -54,10 +54,10 @@ export default {
   },
 
   methods: {
-    onInput(key, value) {
-      this.$emit('input', {
-        ...this.value,
-        [key]: value,
+    onInput(key, modelValue) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [key]: modelValue,
       })
     },
   },

app/src/components/CardCollapse.vue

@@ -23,6 +23,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {

app/src/components/CardDeckFeed.vue

@@ -1,8 +1,11 @@
 <script>
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
+import { h } from 'vue'
+import { BCardGroup } from 'bootstrap-vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {
@@ -13,7 +16,7 @@ export default {
     return {
       busy: false,
       range: this.stacks,
-      childrenCount: this.$slots.default.length,
+      childrenCount: this.$slots.default().length,
     }
   },
 
@@ -59,26 +62,27 @@ export default {
   },
 
   beforeUpdate() {
-    const slots = this.$slots.default
+    const slots = this.$slots.default()
     if (this.childrenCount !== slots.length) {
       this.range = this.stacks
       this.childrenCount = slots.length
     }
   },
 
-  render(h) {
+  render() {
     return h(
-      'BCardGroup',
+      BCardGroup,
       {
-        attrs: { role: 'feed', 'aria-busy': this.busy.toString() },
-        props: { deck: true },
+        deck: true,
+        role: 'feed',
+        'aria-busy': this.busy.toString(),
         ref: 'feed',
       },
-      this.$slots.default.slice(0, this.range),
+      this.$slots.default().slice(0, this.range),
     )
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('scroll', this.onScroll)
     this.$refs.feed.removeEventListener('keydown', this.onKeydown)
   },

app/src/components/ConfigPanel.vue

@@ -6,7 +6,7 @@
       validation,
       serverError: panel.serverError,
     }"
-    @submit.prevent.stop="onApply"
+    @apply="onApply"
     :no-footer="!panel.hasApplyButton"
   >
     <slot name="tab-top" />
@@ -54,6 +54,7 @@
 import { filterObject } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ConfigPanel',
 
   props: {
@@ -77,7 +78,7 @@ export default {
     onApply() {
       const panelId = this.panel.id
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: this.forms[panelId],
       })
@@ -87,7 +88,7 @@ export default {
       const panelId = this.panel.id
       const actionFieldsKeys = Object.keys(actionFields)
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: filterObject(this.forms[panelId], ([key]) =>
           actionFieldsKeys.includes(key),
@@ -105,7 +106,7 @@ export default {
   margin-bottom: 1em;
   border-bottom: solid $border-width $gray-500;
 }
-::v-deep .panel-section:not(:last-child) {
+:deep(.panel-section:not(:last-child)) {
   margin-bottom: 3rem;
 }
 </style>