One UNIQUE Way to Use Teleport in Vue 3 

I agree that in this simple example, a css grid would also make sense. Maybe a more clear example that shows the value of teleport would be inserting the table of contents after the first X paragraphs. That's how I'm using it in my project, at least. But really appreciate the comment - good note for me to take away and provide more valuable examples for future vids :)

​@@LearnVue I think you broke the concept down to a simple example which is exactly what you should do when teaching a concept. I'm just flagging this for a beginner who might overcomplicate something as simple as this example. And for those guys here's the css: main { display: grid; grid-template-columns: 1fr; grid-template-areas: "header" "sidebar" "article" } header { grid-area: header; } article { grid-area: article; } aside { grid-area: sidebar } @media screen and (min-width: 400px) { main { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "header header sidebar" "article article sidebar" } }

I think teleport is still a good idea in this scenario. The CSS grid changes the visual order but not the logical order. Screen readers will announce the content in whatever the DOM order is, and tab key will tab to interactive content in that order as well. So imo while changing layouts with CSS at various breakpoints is fine, if those changes affect the _order_ of elements, we need to think about the effect on assistive technology. Changing the actual DOM may be the correct move even if you can achieve the same visual result with CSS.

@@markthomasnoonan Nowadays, discussions like these give me a hard on :D Good food too! :D It comes with age :D Meta thinking ;) But for beginners, grid it is I think.

​​​​​​@@tomparke2407the teleport example is way simpler and intuitive than the CSS equivalent you wrote, and most devs .. beginners even more (since that's your concern) don't really dig into CSS (thus tailwind's popularity) and would prefer the JS solution. When there's some non straightforward logic involved it's always JS for me, no clever new CSS nor sass or whatever.

haha dont worry - im out here editing my projects when i find these tips too :)

the use case you just mentioned is exactly what I should have added to make this click. haha - sorry about that, but hopefully this use of teleport still helps.

thanks for watching! glad other people find this one cool

Oooh that sounds cool - do you have a code sample?