Hey Folks, it's me again!

Today, I would like to share with you how I recently made the Vue Dynamic Components bit more stable to avoid unexpected cases, improve props stability, and in general provide better developer experience.

This is how I solved my problem, if you encounter the same and you solved it differently, please let me know in the comments! :)

Problem

The default Vue Dynamic Components definitely gives you a lot of flexibility but to my taste a bit too much - especially if you want to have a better Type Safety with TypeScript. Let's take a look at the following example:

< script > import { ref } from ' vue ' ; import AwesomeButton from ' ./AwesomeButton.vue ' ;

const shouldDisplayButton = ref ( true ); </ script >

< template > <div> <component :is= "shouldDisplayButton ?…