The explanatory page is already HTML. Only one small region needs to recalculate when a reader changes a quantity. Mount petite-vue on that region and leave the surrounding document as ordinary markup. You do not need to turn every heading and paragraph into an application component.
Consider a fictional packing estimate: each tray holds six items and the reader enters the tray count. Two trays mean twelve items. This is arithmetic for a reading example, not an inventory reservation or a submitted order.
Open the complete example · Download the full HTML source
Give the page an explicit mount target
The official petite-vue README documents createApp() with an object scope and an explicit mount target. After loading its browser distribution, connect the state to the marked HTML:
<section id="estimate" v-scope>
<label for="trays">Tray count</label>
<input id="trays" v-model="trays" inputmode="numeric">
<p v-if="valid">{{ Number(trays) * 6 }} items</p>
<p v-else>Enter a whole tray count from 0 to 100.</p>
</section>
PetiteVue.createApp({
trays: '2',
get valid() {
return /^\d+$/.test(this.trays) && Number(this.trays) <= 100;
}
}).mount('#estimate');
Keep the input as a string while the reader types. A blank field is a temporary editing state, not the number zero. Convert the value only after checking the intended format and range.
Make the calculation's rule visible
Write “six items per tray” beside the control. Do not leave the conversion factor buried in a JavaScript expression. The reader needs to know whether the number represents trays, individual items, or something else.
For the fixture, zero trays produces zero items and two trays produces twelve. A negative count, a fraction such as 1.5, and an empty input should show the input message instead of a plausible estimate. Clear any separate copied-result confirmation after another edit.
Keep the result in the HTML reading order immediately after the labeled input. If you add a button to restore two trays, name it Restore example rather than Undo: it returns to a supplied value, not to an arbitrary earlier edit.
Keep templates under your control
petite-vue evaluates the expressions in its HTML templates. The official README discusses its Content Security Policy limitation and warns against mounting it over unsanitized user HTML. Use authored markup as the template and pass user values through the data scope. Do not build new directive expressions from text a visitor pasted.
This is also a reason to keep the mount target narrow. A reader's note elsewhere in the document does not need to become an executable template just because the estimate uses a reactive input.
The existing Vue in one HTML file guide covers the full Vue browser build and component rules. petite-vue is a separate package with its own supported features; do not substitute its API into a full Vue component example.
Deliver the page you actually tested
An external script URL is still a dependency of the saved HTML. Include the chosen browser distribution in a self-contained delivery file when that is the format you need, then check the estimate in the recipient's browser conditions.
For a review in NOS, keep the packing rule and input constraints beside the estimate. Ask whether six items per tray is the correct supplied rule before anyone mistakes a neatly updating number for a confirmed operational quantity.