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
0
28

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

Pizza_JP#35

Avatar for Kaneko Takeshi

Kaneko Takeshi

November 20, 2020
Tweet

More Decks by Kaneko Takeshi

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

Other Decks in Technology

See All in Technology
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
Avatar for COLOPL Inc. colopl
0
150
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
150
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
140
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
620
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.6k
Claude Code for NOT Programming
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
110
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
170
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
520
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
220
GitHub Copilot CLI を使いやすくしよう
Avatar for Yuta Matsumura tsubakimoto_s
0
110
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.4k
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
Avatar for hiro-torii hiro_torii
0
190

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910

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