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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
42
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
99
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
84
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
100
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
31
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
30
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
78
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
40
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
50

Other Decks in Technology

See All in Technology
When Platform Engineering Meets GenAI
Avatar for suci sucitw
0
170
AIが自律的に回る開発ループを設計してチーム開発に組み込む
Avatar for Mitsuhiro Komuro (nekorush14) nekorush14
0
120
Multi-Agent並列開発を 安全に回すための技術 / Technology for Safely Multi-Agent Parallel Development
Avatar for philomagi tooppoo
0
100
あなたの知らないPDFのアクセシビリティ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
240
「ビジネスがわかるエンジニア」とは何か？
Avatar for ryooob ryooob
0
280
脱SaaS！FDEを支えるプロビジョニングと分離設計
Avatar for Kenichi SUZUKI knih
0
300
フィジカル版Github Onshapeの紹介
Avatar for shiba_8ro shiba_8ro
0
320
自分が詳しくない領域でAIを使う #プロヒス2026
Avatar for konifar konifar
20
7.4k
自宅LLMの話
Avatar for Kazuto Kusama jacopen
1
720
WebGIS AI Agentの紹介
Avatar for _shimizu _shimizu
0
550
Kiro Ambassador を目指す話
Avatar for Kazuki Adachi k_adachi_01
0
130
Comment regagner la souveraineté de vos données tout en étant payé grâce à Nostr !
Avatar for Renaud Lifchitz rlifchitz
0
190

Featured

See All Featured
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
170
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
66
55k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
200
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
250
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
420
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2k

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