Yeah. I have also used them to render “widgets” into another component too far up the component tree. Almost as a `` but where the target location is not known by the component. Let’s say you have a page to edit a product and data is divided into multiple tabs. Mabe one tab has 2 actions (Save & Delete) and another tab has other actions (Add attribute, add discount, etc.). You can have the parent page include a Portal target called `id=“page-actions”` and when each tab is active, they teleport their own buttons into that portal and it renders them into the layout as expected. I don’t know if my example was clear enough. It’s kind of hard to explain with words alone.
Thanks ! Great content as always ❤ One limitation with Teleport that made me avoid it for some time, that is well documented in the docs: "The teleport to target must be already in the DOM when the component is mounted." Unfortunately in most cases, my "host" element is not ready on mount, but is ready some ticks after the "guest" is mounted (not shown of course). For this reason, I've been avoiding teleport and been using "portal-vue" or "safe teleport" packages. I hope that this would be implemented in the core.
Yeah. I have also used them to render “widgets” into another component too far up the component tree. Almost as a `` but where the target location is not known by the component.
Let’s say you have a page to edit a product and data is divided into multiple tabs. Mabe one tab has 2 actions (Save & Delete) and another tab has other actions (Add attribute, add discount, etc.).
You can have the parent page include a Portal target called `id=“page-actions”` and when each tab is active, they teleport their own buttons into that portal and it renders them into the layout as expected.
I don’t know if my example was clear enough. It’s kind of hard to explain with words alone.
Thanks ! Great content as always ❤
One limitation with Teleport that made me avoid it for some time, that is well documented in the docs:
"The teleport to target must be already in the DOM when the component is mounted."
Unfortunately in most cases, my "host" element is not ready on mount, but is ready some ticks after the "guest" is mounted (not shown of course).
For this reason, I've been avoiding teleport and been using "portal-vue" or "safe teleport" packages.
I hope that this would be implemented in the core.
Oh yes, good point there! Did you ever raise a Vue issue on that by any chance?
@@TheAlexLichter oh, I'd never thought of that!
Will create one soon!
Let's use. There are a lot of caracteristics and options for learn . I have been stunding and programing VUE since 21 and I can't finish to study
Always new things to discover!