Vue2 is EOL since December 31 2023

We have two different types of application to migrate: Application in class component API and application without typescript

• Applications that are in class component API will need to be done in two steps:

  1. one we migrate from component to composition API (example)
  2. next we can convert into Vue3 (or compat mode if needed)

• Applications that are in javascript can be directly migrated in vue-compat-mode

Migration strategy

graph TD
    
  B(Vue migration steps) --> C{Build}
  C --> D[Webpack]
  C --> E[ViteJs]
  D --> G[translate by gettext]
  G -- Composition API --> F[Compat mode]
  G -- Class Component API --> F[Compat mode]
  F --> I[Vue3]
  I --> T[remove app from .eslintrc]
  T --> J(OPT pinia)
  J --> K(OPT inject provide)
  K --> L(OPT convert last class component in composition)
    
  E --> M[translate by gettext]
  M -- Composition API --> S[Pinia]
  S --> N[Compat mode]
  M -- Class Component API --> N[Compat mode]
  N --> Q[Vue3]
  Q --> U[remove app from .eslintrc]
  U --> R(OPT inject provide)

• translate by gettext means replace non-standard <translate> directive by gettext, it's easier to replace this unsupported tag by gettext injection than having our build able to manage them for compat mode
• small compat mode commit exemple
• once compat mode is done, we can correct all errors and remove compat mode to have app in vue3, no need to have all components in composition API in order to work migration guide. Example of how to migrate components to composition API.
• pinia is not always required, but it's a long term objective, if its not too long, it's a good thing to remove vuex pinia migration guide
• inject/provide: in our first applications we did not have a proper way to inject our data coming from application into a readonly state properties, this is now possible in vue composition api