Vue 3 Crash Course: Lesson 2 ~ Teleportation Portals (Vue 3 Teleport Component)

Опубликовано: 09 Август 2020
на канале: Zak H.

635

#Vue3CrashCourse #Vue3Teleport #Vue3Portals

Vue Crash Course Lesson 2 ~ Vue 3 Teleport (Aka Portals)

"Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.

However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app.

A common scenario for this is creating a component that includes a full-screen modal. In most cases, you'd want the modal's logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition.

Consider the following HTML structure."

That's straight from the docs, we're about to implement the real world example. Let's blow minds with Vue Teleportation Portals.

Official Vue 3 Teleport Docs
~~~~~~~~~~~~~~~~~~
https://v3.vuejs.org/guide/teleport.html

Tailwind CSS CDN
~~~~~~~~~~~~
https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css

Vue 3 Crash Course Github Repository
~~~~~~~~~~~~~~~~~~~~~~~~~
https://github.com/zhorton34/vue3-cra...

~~~~~~~~~~~~~~~~~~~~
Clean Code Studio ~ Simplify!
Clean Code Clean Life
~~~~~~~~~~~~~~
https://cleancode.studio
~~~~
Github
https://github.com/zhorton34
~~~~~~~~~~~
NpmJS Packages
https://www.npmjs.com/~zhorton999
~~~~~~~~~~~~~~
Packagist (Composer)
https://packagist.org/users/zhorton34...
~~~~
Twitter
  / thenewkid33
~~~~~~~~~~~~
Facebook
  / cleancodestudio
~~~~~~
LinkedIn
  / zak-horton