Vue.js 3.3 released, comes with improved developer experience

Vue 3.3 has been released and it comes with a number of improvements that seek to improve developer experience.

Vue.js 3.3 features

Vue.js 3.3 brings several improvements to the TypeScript developer experience. Previously, the defineProps and defineEmits macros only supported local types, but in Vue 3.3, they support imported types and a limited set of complex types. This enables developers to define more complex types when defining props and emits in components. In addition, components using the <script setup> syntax can now accept generic type parameters, which allows for more type-safe and reusable components. The defineEmits macro has also been made more ergonomic by allowing developers to declare emits with a key-value syntax, making it more readable and less verbose.

Another feature introduced in Vue.js 3.3 is the defineSlots macro. This allows developers to declare expected slots and their respective slot props in a type-safe way, which serves as a type hint for IDEs and vue-tsc. The defineSlots macro only accepts a type parameter and no runtime arguments and should be a type literal where the property key is the slot name, and the value is a slot function. The first argument of the function is the props the slot expects to receive, and its type will be used for slot props in the template.

Vue.js 3.3 also brings experimental features, such as the defineModel macro and reactive props destructure. The defineModel macro simplifies the process of supporting two-way binding with v-model by automatically registering a prop and returning a ref that can be directly mutated. This removes the need for developers to manually declare a prop and emit a corresponding update event. Reactive props destructure allows destructured props to retain reactivity, providing a more ergonomic way to declare props default values.

Overall, Vue.js 3.3 brings several improvements to the TypeScript developer experience, making it easier and more efficient to develop type-safe Vue.js applications.

More information about Vue 3.3.