Vue Teleport

Volardev 編集部 April 28, 2026

Vue の <Teleport> タグは、コンテンツを DOM 構造内の別の場所に移動させるために使用されます。

1. と 'to' 属性

コンテンツを DOM 構造の別の場所に移動するには、移動させたいコンテンツを Vue の <Teleport> タグで囲み、to 属性を使用して移動先を定義します。

<Teleport to="body">
  <p>こんにちは！（Hello!）</p>
</Teleport>

to 属性の値は CSS セレクタ記法で指定します。例えば、上記のコードのようにコンテンツを <body> タグ直下に送りたい場合は、単純に <Teleport to="body"> と記述します。

ページ読み込み後に「検証（Inspect）」を行うことで、コンテンツが実際に <body> タグへ移動していることを確認できます。

1.1 実装例

CompOne.vue:

<template>
  <div>
    <h2>コンポーネント</h2>
    <p>これはコンポーネントの内側です。</p>
    <Teleport to="body">
      <div id="redDiv">こんにちは！（Hello!）</div>
    </Teleport>
  </div>
</template>

ページを右クリックして「検証（Inspect）」を選択すると、赤色の <div> 要素がコンポーネントの外に押し出され、<body> タグの末尾に移動していることがわかります。

また、例えば <div id="receivingDiv"> という ID を持つタグがある場合、移動させたいコンテンツを <Teleport to="#receivingDiv"> で囲むことで、その特定の <div> 内へテレポートさせることも可能です。

2. テレポートされた要素のスクリプトとスタイル

<Teleport> タグによってコンテンツがコンポーネントの外に移動しても、コンポーネント内の <script> および <style> タグに記述された関連コードは、移動後のコンテンツに対しても引き続き機能します。

2.1 実装例

以下の例では、コンパイル後に <div> タグがコンポーネント内に存在しなくなっても、<style> や <script> タグ内の関連コードがテレポートされた <div> に対して正しく動作することを示しています。

CompOne.vue:

<template>
  <div>
    <h2>コンポーネント</h2>
    <p>これはコンポーネントの内側です。</p>
    <Teleport to="body">
      <div 
        id="redDiv" 
        @click="toggleVal = !toggleVal" 
        :style="{ backgroundColor: bgColor }"
      >
        ハロー！<br>
        クリックしてみてね
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 切り替え用のフラグ
      toggleVal: true
    }
  },
  computed: {
    bgColor() {
      if (this.toggleVal) {
        return 'lightpink'
      }
      else {
        return 'lightgreen'
      }
    }
  }
}
</script>

<style scoped>
#redDiv {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

#redDiv:hover {
  cursor: pointer;
}
</style>