Skip to content

Convert the pagination components to the Composition API

Vue 3 introduces the Composition API, which completely changes the way components are written. It is quite similar to React Hooks, with some differences. This image shows the difference in code organization that the Composition API offers: instead of having to group all your code by type (props, data, methods, …), the code can be structured feature by feature, making the Composition API very useful for complex components. Its flexibility also enables behaviors that were not possible before, such as accessing Vue Router's navigation guards on any component and not just a view, and could help us fight against the myriad of bugs that showed up after the Vue 3 migration.

Before we even consider an impossible quest to rewrite the entire frontend in Rust in the Composition API, we should get a feel of how hard it is to get acquainted with the Composition API, to rewrite an existing component with it, and to make it work together with existing Options API components. It sounds like ConfidenceTag, the component that displays confidence scores, could be a good candidate for a dead simple component to rewrite at first. EditableName could be a good candidate for a second component, where click events, store actions, etc. must be managed.

Note that the Composition API may benefit from TypeScript (#36 (closed)), especially when using editors with TS integrations such as Visual Studio Code. It could be enabled pretty easily with <script setup lang="ts"> without requiring us to migrate the entire frontend first.