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

Other Decks in Technology

See All in Technology
分断された OT と IT を繋ぐ架け橋 -Kubernetes が切り拓く 産業用組み込み製品の現在地 -
Avatar for 小野佑大 yudaiono
1
120
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
1
250
Claude Codeウェビナー資料 - AWSの最新機能をClaude Codeで高速に検証する
Avatar for ONOYAMA Shodai oshanqq
0
900
Agent Skillsで実現する記憶領域の運用とその後
Avatar for yamadashy / やまだし yamadashy
2
2k
"うちにはまだ早い"は本当？ ─ 小さく始めるPlatform Engineering入門
Avatar for Haruka Sakihara harukasakihara
6
620
インプロセスQAのための要因から捉えるプロジェクトリスクマネジメントnano #1 開発リソース効率状態への対処 #jasstnano
Avatar for barus_qa_dev barus_qa
0
150
2026年春のAgentCoreアプデ 細かいやつ全部まとめ
Avatar for みのるん minorun365
4
240
クラウドネイティブ DB はいかにして制約を 克服したか？ 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
Avatar for hacomono Inc. hacomono
PRO
6
1k
おいらのAWSアップデートの追い方〜Slack×AgentCore〜
Avatar for やくも yakumo
1
110
SpeechTranscriber + AIによる文字起こし機能
Avatar for Kazuki Shirai kazuki1220
0
110
2026-05-14 要件定義からソース管理まで！IBM Bob基礎ハンズオン
Avatar for YutaNonaka yutanonaka
0
160
写真で見るAWS Summit Singapore 2026
Avatar for Kazuki Adachi k_adachi_01
0
110

Featured

See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
300
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
170
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
180
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
350
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
150
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
320
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
280
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
35k

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