Vue2 EOL is announced for 31 december 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

Apps that are in typescript and class component API

Small

• [x] git/permissions-per-group
• git/branch-tag
• [x] permission-per-group-badge
• [x] core: frs/permissions-per-group
• [x] core: project-admin-banner

Medium

• crosstracker search
• git/respository-list
• program_managment/program_increment
• program_management/iteration
• core: site-admin/platform-banner
• [x] project_milestones

Large

• roadmap
• taskboard

Apps that are in javascript

Small

• [x] agiledashboard/permission-per-group
• [x] core: news/permissions-per-group
• [x] document
• [x] vue3-breadcrumb-privacy
• label
• [x] pullrequest-button (buttons to create the PR)
• [x] svn/permission-per-group
• testmanagement
• [x] tracker/move-artifact
• [x] tracker/permission-per-group

Medium

• [x] timetracking / personnal

On going

• baseline
• tracker/workflow
• timetracking / overview
• core: project registration
• tracker creation

Do not migrate

• service modal => will be rewritten during new navbar navigation work

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 --> 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 --> 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