Markdown with Vue escape hatches
A starter article showing how long-form writing can live beside real Vue components.
Writing on a technical website should feel calm. The article should carry the reader from idea to idea without the interface constantly announcing itself, but the page still needs room for code examples, diagrams, interactive demos, and embedded tools.
This article is a small working example for the new articles section. The content is markdown, while richer pieces are Vue components registered for article use.
The authoring shape
Normal prose stays in markdown:
## A section heading
Write the argument in plain markdown. Add code fences, lists, links, and quotes as needed.
When markdown is too small a box, include a Vue component on its own line:
::ArticleMetricBand{width="page" eyebrow="Escape hatch" title="Vue owns this part"}
The width option accepts article or page. Article width keeps the component aligned with the reading column. Page width lets demos and dense visual explanations use the full site content area.
Escape hatch
Vue can own the structured parts
This band is a real Vue component included from markdown. Swap it for charts, simulations, playgrounds, product demos, or embedded tools as the article library grows.
01
Markdown stays readable
02
Components stay maintainable
03
Layouts choose article or page width
Media examples
Images can stay in ordinary markdown. Put shared article assets in public/articles/ and reference them from the site root:
Video embeds are a good fit for the Vue escape hatch, because they need a responsive wrapper, privacy-friendly embed URL, and strict iframe attributes:
::ArticleYouTube{width="article" id="dQw4w9WgXcQ" title="Example YouTube embed"}
Why this split works
Markdown is excellent for durable writing. Vue is excellent for state, layout, and interaction. Keeping the join explicit makes articles easy to scan in a text editor while still giving each piece an escape hatch when the material needs more than words.
Serious writing benefits from quiet defaults: a comfortable line length, generous spacing, clear headings, and almost no decorative noise.
That is the visual direction here: restrained, editorial, and readable, with enough structure to support deeper technical material later.