Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Kaneko Takeshi Kaneko Takeshi
November 20, 2020
Technology
30
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
44
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
99
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
85
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
40
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
55

Other Decks in Technology

See All in Technology
NetBoxを利用した作業効率化の試み_NetDevNight4
Avatar for Takumi Nohara tnoha
0
460
ラジオの科学
Avatar for Frieve-A frievea
0
210
toio・myCobotでフィジカルAIっぽいことを行うための検討（とりあえず調査） / フィジカルAI LT（IoTLTによる開催）
Avatar for you（@youtoy） you
PRO
0
280
変化の早いClaude Codeを 書籍に落とし込む
Avatar for Oikon oikon48
6
1.3k
AIが自社のTableauを操作する世界へ：Tableau MCP超入門
Avatar for Yukako Tabata tbtykk
0
110
名古屋の市バスGTFS-JPデータ×スガキヤ 最寄りバス停検索をAmazon ElastiCache Serverless for Valkeyで最適化する
Avatar for usanchuu usanchuu
1
290
事業価値と Engineering 2026年度版
Avatar for Recruit recruitengineers
PRO
35
18k
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
Avatar for hatappi hatappi
0
230
SmartHR Engineering Team Deck
Avatar for SmartHR Recruit smarthr
0
190
Cursor Meetup Sapporo - Cursor物語 続編
Avatar for Hiroyuki Kaji cocacola917
0
120
[ChatGPT Work LT]事務作業が苦手な人のための バックオフィスの「半」自動化
Avatar for chimaki chimaki_iot
0
200
制約理論（ToC）入門　2026版
Avatar for Recruit recruitengineers
PRO
5
1.1k

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
620
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
240
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
480
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
470
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
400

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の構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる