v-cloak 未コンパイルテンプレートの非表示
最終更新：2026-10-22
v-cloak 未コンパイルテンプレートの非表示
v-cloak はコンパイルが完了するまで要素に残る属性です。CSS と組み合わせて生のテンプレートを隠し、初回描画時に {{ }} がちらつくのを防ぎます。
| グループ | ディレクティブ |
|---|---|
| 種類 | ディレクティブ |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
[v-cloak] { display: none; }
<div v-cloak>{{ msg }}</div>⚙️ 引数
| expression | 式なし |
|---|
戻り値：ディレクティブ。戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
On slow networks the raw braces stay hidden until Vue mounts and the real text appears.💡 ポイント
⚠️ 注意 CSS ルール [v-cloak]{display:none} は自分で書く必要があります。v-cloak 自体にはスタイルがありません。
ℹ️ 補足 ビルド工程がなく、コンパイラを含む完全版 Vue を使うページでのみ必要です。SFC のコンパイル済み出力ではこの問題は起きません。
💡 ヒント コンパイル完了後、Vue が自動的に属性を取り除くため、非表示ルールは効かなくなります。
🏷️ 関連ディレクティブ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q CSS を自分で書かなければならないのはなぜですか？
A v-cloak はマーカー属性にすぎず、スタイルを持ちません。[v-cloak]{display:none} は自分で宣言します。
Q モダンなプロジェクトでも必要ですか？
A SFC + バンドルのプロジェクトでは不要です（出力に未コンパイルのテンプレートがないため）。CDN で完全版 Vue を直接読み込むページでのみ必要です。
Q コンパイル後に属性は自動的に取り除かれますか？
A 取り除かれます。Vue がマウント時に v-cloak を外し、非表示ルールは効かなくなります。
