Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Vue.js v3.0 機能紹介① Teleport

Avatar for Kaneko Takeshi Kaneko Takeshi
November 20, 2020
Technology
32
0

Vue.js v3.0 機能紹介① Teleport

Pizza_JP#35

Avatar for Kaneko Takeshi

Kaneko Takeshi

November 20, 2020

More Decks by Kaneko Takeshi

See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
Avatar for Kaneko Takeshi tkckaneko
0
46
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
99
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
87
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
100
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
31
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
31
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
79
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
41
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
60

Other Decks in Technology

See All in Technology
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
Avatar for nade kazumanagano
0
330
現場で役立つ技術負債の効果的な返済方法
Avatar for 増田 亨 masuda220
PRO
1
1.1k
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
1.3k
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
150
山手線を徒歩で一周してわかった、 位置情報アプリは「足」が最強のデバッガー
Avatar for hinakko hinakko
0
140
作品が生態系になった ─ Mini Tokyo 3D から世界へ
Avatar for 草薙昭彦 nagix
0
180
日経電子版を支えていく Kasane Design System/fec_fukuoka
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
1.4k
2026/09/10 Spring Bootから Jakarta EE/MicroProfileへの移行
Avatar for Satoshi Seto megascus
0
360
人間はどの意思決定を手放せるのか
Avatar for Yoshitaka Kawashima kawasima
13
5.4k
新機種発売前に見直そう！端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
Avatar for ZOZO Developers zozotech
PRO
0
160
クロスボーダーM&AのValue Upを支えるプロダクト開発。日米チームのハブになったプロダクトエンジニアの実践 / Product Engineering Conference 2026
Avatar for GENDA genda
0
130
技術的負債から考える、AI時代のエンジニアリング投資 — ビズリーチの技術的負債と向き合った経験から、変更し続けられるソフトウェアを考える/ technical-debt-con2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
860

Featured

See All Featured
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
240
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
450
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
240
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
530

Transcript

  1. Vue.js 3.0 機能紹介① Teleport

  2. Teleport 通常では定義したコンポーネントが属するDOMツリーでレンダリン グされるのですが、Teleportを使えば別の場所に移動されることが できます。 - モーダルとか上のレイヤーに表示したいコンテンツを移動させ たりできる - 親要素のStyleに干渉されなくなる

  3. 超便利！

  4. Teleport ちなみに2系でもPortalVueってライブラリを使えばできます https://github.com/LinusBorg/portal-vue

  5. Teleport <teleport>コンポーネントでtargetにセレクタで指定すると、指定さ れたtargetのコンポーネント内にレンダリングされます。 <teleport to="body"> <Modal /> </teleport> ※ Vue.jsのDOMツリーの外でも指定できます

    この場合だと<body>の 直下に入ります

  6. Teleport デモ

  7. Teleport - DOMの構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる