<template> テンプレートのラッパー要素
最終更新：2026-10-22
<template> テンプレートのラッパー要素
は透明なグループ化のコンテナです。自らは要素を描画せず、v-if / v-for のグループ化や多分岐の内容の受け皿に使います。
| グループ | ビルトイン |
|---|---|
| 種類 | コンポーネント・要素 |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<template v-if="ok">
<p>最初の段落</p>
<p>次の段落</p>
</template>
<template v-for="item in list" :key="item.id">...</template>⚙️ 引数
| props | v-if / v-for / v-slot と組み合わせます。自体には描画出力がありません |
|---|
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Both paragraphs toggle together without leaving an empty wrapper.💡 ポイント
💡 ヒント 複数の要素に同じ v-if をかけたいときに使い、無意味な div を増やさずに済みます。
ℹ️ 補足 DOM テンプレート内の は、v-slot と組み合わせてスロットの内容の受け皿にもなります。
⚠️ 注意 v-for を template に書くときは、key も template に書きます（Vue 3 で対応）。
🏷️ 関連ビルトイン
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q DOM に現れますか？
A 現れません。コンパイル時の透明なコンテナです。
Q class を付けられますか？
A 付けられません。属性は実際の要素に置く必要があるので、div を使うか子要素に付けてください。
Q スロットの template と同じものですか？
A 同じタグで 2 つの用途があります。1 つはグループ化、もう 1 つは具名スロットの受け皿です。
