Investigate operations required for migration of Vue 2.7 to Vue 3

[cnotv]

Description

For the next step of the Vue migration to the latest version, it's required to list issues and potential solution for tackle them down.

Already identified requirements to be listed in a clear way:

• Verify plugins to be removed, find replacements and size of code to be changed or require refactory
• Syntax update (through script?)
• <router-link> deprecation
• Define requirements for a script to update the whole content based on the known breaking changes
• Nuxt residual removal, based on comment Nuxt removal #7211 (review)

[cnotv]

At the current states, these are the actions to be handled, [x] means already fixed and [] to be fixed:

• Identify compatible packages configurations in packages.json (as in PR)
  • 3 packages.json needs to be updated
  • Libraries versions resolutions must be solved by upgrades or changing packages
  • Several existing warnings on build turned into issue and had to be fixed
  • Cleanup of devDependencies
  • Node engine requirement bumped to 16
• Check possibility to convert vue.config.js into TS as already mentioned by @richard-cox Conversion requires too much efforts
  • Required to add types to run successfully (~650 lines)
  • Vue CLI library is in maintenance mode, so TS or newer examples are just for Vite
  • Current configuration does not match neither Vue nor Webpack configuration type
  • Compiling would require ts-node to allow Typescript syntax
  • Current Vue configuration requires a very extensive refactoring to make it work
• Identify configuration issues due migration from Webpack 4 to 5 (as in PR); lack of typing makes very complex to update
  • Copy Plugin has been initialized using an options object that does not match the API schema., now to be defined in pattern key as object config
  • whitespaces feat(compiler-core): whitespace handling strategy vuejs/core#1600 (comment)
  • Webpack new API schema, configuration.watchOptions.ignored should be a non-empty string
  • Dev Server new API schema
    • options has an unknown property 'before', replaced by onBeforeSetupMiddleware
    • options has an unknown property 'public'
    • devServer.public does not exists devServer.public no longer exists in Vue CLI v5. Update documentation on that vuejs/vue-cli#6841
    • TypeError: app.use is not a function, new object over parameters
    • Cannot read properties of undefined (reading 'websocketProxies')
  • vue DeprecationWarning: 'https' option is deprecated https://webpack.js.org/configuration/dev-server/#devserverhttp2
  • Cannot add property htmlWebpackPluginAlterChunks, object is not extensible Webpack 4/5 conflicts
• Define TSConfig changes with newer versions: after updating packages some types are not working correctly anymore
  • Jest types are not recognized, but work fine for @rancher/components
  • Restore correct file tree for the TSConfig, using root as main, shell as extended
  • It would be convenient to exclude linting of tests files on dev/build Fixed with Exclude Jest unit test from TSConfig #9149
• Storybook updates, since it fails
• Nuxt unnecessary residual code would be optimal to be removed prior migration
  • Several SSR logic for Shell initialization (link)
  • Remove libraries
    • @nuxtjs/axios, used only for internal libraries
    • @nuxtjs/webpack-profile, I found no use of this
    • @nuxtjs/eslint-config-typescript, not necessary anymore
    • @nuxt/babel-preset-app, parser to be removed from the vueconfig
• Identify parts of code which needs to be replaced by the script
  • Vue 3 migrations
  • VueTest2 migrations
  • Some compiling error can be returned only after fixing all the types issues
  • Vue + Typescript (mostly to be corrected on Epinio)
    • All the mounted components without type now return overload definition issues (reported in draft PR CI)
    • Cannot find module 'vue/types/vue', not sure if TSConfig issue or migration change
    • Cannot find module 'vue/types/options', not sure if TSConfig issue or migration change
    • All typed Vue files which use Vue.extend now return Property 'extend' does not exist on type 'typeof
    • Props are not recognized, it may be related to the Vue.extend issue
    • Property '$emit' does not exist on type
    • Cannot use namespace 'Router' as a type.
    • Property 'extend' does not exist on type 'typeof import
  • Jest
    • Update trasform configuration instead of @vue/vue2-jest
    • TypeError: Cannot read properties of undefined (reading 'prototype'), from i18n global Vue.prototype.t (reported in draft PR CI)
• Review libraries support, tested on another repository, for similar reasons
  • vue-clipboard2, as expected does not work and returns Cannot set properties of undefined (setting '$clipboardConfig'), possible alternative useClipboard with composition API (as component?)
  • vue-js-modal, discontinued since 2 years, a2 is not a constructor, we also don't have a single modal, so there's an extra layer on update
  • vue-meta, discontinued since 3 years but has replacement for Vue3, still discontinued since 1 year, there's also no envisioned use case, as we don't update metadata
• Possible issues on packaging for the basic build also requires to fix all the TS errors

[cnotv]

Given the spikes in this issue, I would recommend to create a separated branch and point PRs to that one.