← All notes

Answer: The v-if directive conditionally renders a block. The block is rendered only when the directive's expression is truthy. v-else can indicate an else block for that v-if.

Compiler

transformIf uses createStructuralDirectiveTransform for if, else, and else-if. processIf is a target-agnostic transform used for both Client and SSR. Chained v-if / else branches are rendered at the same depth.

See also

• vue-template-syntax
• vue-list-rendering

Claims

• id: C1 claim: v-if conditionally renders a block. source: S1 evidence: "The directive v-if is used to conditionally render a block."

• id: C2 claim: The block renders only when the directive expression is truthy. source: S1 evidence: "The block will only be rendered if the directive's expression returns a truthy value."

• id: C3 claim: v-else marks the else block for a v-if. source: S1 evidence: "You can use the v-else directive to indicate an \"else block\" for v-if:"

• id: C4 claim: The compiler treats if, else, and else-if as one structural directive family. source: S2 evidence: "/^(?:if|else|else-if)$/"

Sources

• [S1] Conditional Rendering. Vue.js docs. https://vuejs.org/guide/essentials/conditional.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] compiler-core vIf transform. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/compiler-core/src/transforms/vIf.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_jzng4n8t,
  author = {{iinventedlight}},
  title = {{Vue v-if conditionally renders a block}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-conditional-rendering/},
  note = {Permanent ID iil:note:jzng4n8t. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-conditional-rendering.md.