A detailed introduction to the new Composition API in Vue 3

Asayer's platform is  dedicated to providing insights and resources for developers and DevOps teams, focusing on web application monitoring, session replay, and error tracking. Through articles, tutorials, and case studies, Asayer offers insights into visualizing user sessions, reproducing bugs, and optimizing user experiences. Developers and QA engineers can learn about monitoring user interactions, detecting UI/UX issues, and improving web application performance and reliability.

asayer

Composition API allows you to restructure code from options API, i.e., data, methods, and lifecycle hooks, by grouping all of your code that logically belongs together. It also offers much better TypeScript support. The defineProps() method is used to declare props using <script setup. While in non-script setup components, props are declared using the props property. In non- Scripts, Props is declared using Props.

An ultimate guide to the Vue 3 Composition API

So disappointed with Vue3… Time to move to something more modern that doesn’t try to look like an old and ugly react clone.
You even cloned the bad react habit of not adding semi-colons.
Vue2 with typescript and class components looks so much better than what is showed here. Vue3 is the end of Vue.
As a professional React hater, I prefer to work with React than Vue3.