template コンポーネントテンプレート
最終更新：2026-10-22
template コンポーネントテンプレート
template オプションは、コンポーネントの HTML テンプレート文字列を指定します。実行時にレンダー関数へコンパイルされます（完全版 Vue でサポート。ビルド版では通常 SFC ファイルに書きます）。
| グループ | オプション: 描画とライフサイクル |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
template: "<p>{{ msg }}</p>",
data() { return { msg: "hi" } }
}⚙️ 引数
| value | HTML 文字列（またはテンプレート要素を指す #id セレクター） |
|---|
戻り値：戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows a bold 'from the template option: hello'.💡 ポイント
ℹ️ 補足 コンパイラーを含む完全版 Vue でのみ使えます。npm ビルドのランタイム版では SFC か render 関数が必要です。
💡 ヒント 長いマークアップにはバッククォートの複数行文字列か、独立した