Problem

The Mismatch Finder tool is currently built using Vue 2. This makes it vulnerable to the consequences of Vue 2's end of life, and prevents us from replacing the WiKit components, used to compose its UI, with Codex components. This step is key to deprecate the former, legacy design system.

Solution

In order to ease the Mismatch Finder's code base away from Vue 2 and into Vue 3, and avoid the consequences of Vue 2's EOL, we'll use the Vue 3 migration build. This process requires updating various peer dependencies, such as Vue Banana and Inertia.

Acceptance criteria

• Vue is updated to version 3 with @vue/compat enabled
• All peer dependencies install without a problem
• Build settings (webpack.mix.js) are updated
• Blocking typescript incompatibilities are fixed

Notes

• Compatibility layer migration guide: https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow
• Example mix config for Vue Compatibility layer: https://gist.github.com/thecrypticace/2e405ec70d3944a068e21caec59c7122
• Test Commit: https://github.com/wmde/wikidata-mismatch-finder/tree/poc-wikit-legacy
• How to migrate vue2 to vue3 gist: https://gist.github.com/pixelmattersdev/92255daae4161d1022d30c9f3a1b2d6c?file=24-vue3-is.vue
• Vue 3 migration from VueMastery: https://www.vuemastery.com/blog/migration/