This epic serves as a meta-epic to track all the refactoring mentioned below In order to prepare for the eventual migration to Vue 3.x, we should be wary about adding the following features to the codebase: ## Vue filters **Why?** Filters [are removed](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md) from the Vue 3 API completely. **What to use instead** Component's computed properties / methods or external helpers. ## Event bus **Why?** `$on` and `$off` methods [are removed](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md) from the Vue instance, so in Vue 3 it can't be used to create an event bus. **What to use instead** Vue docs recommend using [mitt](https://github.com/developit/mitt) library. It's relatively small (200 bytes gzipped) and has a simple API ## <template functional> **Why?** In Vue 3, `{ functional: true }` option [is removed](https://github.com/vuejs/rfcs/blob/functional-async-api-change/active-rfcs/0007-functional-async-api-change.md) and `<template functional>` is no longer supported. **What to use instead** Functional components must be written as plain functions: ```javascript import { h } from 'vue' const FunctionalComp = (props, slots) => { return h('div', `Hello! ${props.name}`) } ``` ## Old slots syntax with `slot` attribute **Why?** In Vue 2.6 `slot` attribute was already deprecated in favor of `v-slot` directive but its usage is still allowed and sometimes we prefer using them because it simplifies unit tests (with old syntax, slots are rendered on `shallowMount`). However, in Vue 3 we can't use old syntax anymore. **What to use instead** The syntax with `v-slot` directive. To fix rendering slots in `shallowMount`, we need to stub a child component with slots explicitly. ## Linting These cases will be linted against via https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/merge_requests/50. If in future we need to lint against additional APIs/syntaxes, we should extend our linting to cover them.