Calculating height and width of Vue slots
Usually in such cases it's a logical mistake, rather than an issue with the framework. So I would go with simplifying your code to the bare minimum that demonstrates your issue.
Assuming you get clientWidth and clientHeight on mounted() or afterwards, as demonstarted below, it should just work.
Avoid any timer hacks, they are the culprit for bugs that are extremely hard to debug.
<template> <div style="min-height: 100px; min-width: 100px;"> <slot /> </div></template><script>export default { name: 'MyContainer', data (){ return { width: 0, height: 0, } }, mounted (){ this.width = this.$slots["default"][0].elm.clientWidth this.height = this.$slots["default"][0].elm.clientHeight console.log(this.width, this.height) // => 100 100 (or more) },}</script><style scoped lang="scss"></style>
You can use a trick and put the code in a setTimeout method to execute it in another thread with a tiny delay:
setTimeout(() => { // Put your code here ...}, 80)