docs / Runtime

Built-in Components

Image, Portal, Experiment and LoadingIndicator — all auto-imported from @vesk/runtime.

Vesk ships several built-in components, all auto-imported from `@vesk/runtime`.

Image

app/components/Hero.vsk

									
										<Image src="/hero.jpg" alt="Hero image" width={1200} height={600} priority />

Responsive with automatic srcset generation and lazy loading by default.
Props: src, alt, width, height, priority (preload + no lazy), loading ('lazy'|'eager'), sizes, widths, placeholder.
SSR renders a `<span>` wrapper with `<img>`; priority images get `<link rel="preload">` in `<head>`.

Portal

app/components/Modal.vsk

									
										<Portal target="#modal-root">
  <div class="modal">Hello from portal</div>
</Portal>

Teleports children to another DOM node by CSS selector or element.
SSR returns an empty string — client-only.

Experiment

app/components/Hero.vsk

									
										<Experiment name="hero-variant" variants={[
  { name: 'control', weight: 50, content: <OriginalHero /> },
  { name: 'challenger', weight: 50, content: <NewHero /> },
]} />

A/B/n testing with sticky (cookie-based) assignment, default true.
`track: true` records assignments to window.__vsk_experiments.

LoadingIndicator

Nuxt-style page-navigation progress bar: `<LoadingIndicator color="#ff6600" height={3} />`.
Programmatic control via `useLoadingIndicator()` (start/finish); global defaults via `configureLoadingIndicator({ duration, throttle, hideDelay })`.