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
27

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
31
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
86
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
93
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
26
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
24
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
71
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
30
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
35

Other Decks in Technology

See All in Technology
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
510
Authlete で実装する MCP OAuth 認可サーバー #CIMD の実装を添えて
Avatar for watahani watahani
0
300
日本Rubyの会: これまでとこれから
Avatar for Koji SHIMADA snoozer05
PRO
6
250
Introduce marp-ai-slide-generator
Avatar for Itaru Tomita itarutomy
0
150
松尾研LLM講座2025 応用編Day3「軽量化」 講義資料
Avatar for Aratako aratako
14
4.7k
Microsoft Agent Frameworkの可観測性
Avatar for tomokusaba tomokusaba
1
120
「駆動」って言葉、なんかカッコイイ_Mitz
Avatar for comucal comucal
PRO
0
120
TED_modeki_共創ラボ_20251203.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
170
AWSインフルエンサーへの道 / load of AWS Influencer
Avatar for WHIsaiyo whisaiyo
0
240
Strands AgentsのEvaluatorをLangfuseにぶち込んでみた
Avatar for あんどお andoooooo_bb
0
100
AI with TiDD
Avatar for Shiraji shiraji
1
330
『君の名は』と聞く君の名は。 / Your name, you who asks for mine.
Avatar for NTT docomo Business nttcom
1
130

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
770
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.2k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
94
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
46
Believing is Seeing
Avatar for Spiro Bolos oripsolob
0
18
New Earth Scene 8
Avatar for Sydney Stone popppiees
0
1.3k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
450
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
0
26
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k

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