Skip to content
v1.0
Components

App

The application root: the singletons every app must mount exactly once — the pre-paint theme stamp, the title template, the skip link, the toast outlet — mounted by one component so an app cannot forget one.

Anatomy

A real GdApp, wrapping this specimen. The button raises a toast through useGdNotify — the outlet it lands in is this component's. The theme stamp it injects is keyed, so it and the one already on this page dedupe to a single script.
Code 
<!-- app.vue -->
<GdApp product="GRIDD Code" tagline="GRIDD Code — design planning codes like a design system">
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</GdApp>

It renders almost nothing itself: an optional skip link first, the default slot, and the toast outlet last. Its work is the head — the pre-paint theme stamp that stops a dark-pinned visitor seeing the light HTML flash on refresh, and the title template, so pages set only their own part and the product name is appended in one place.

What it provides, and what it refuses to

  • The theme stamp is keyed. A layout — or a nested mount — injecting the same script dedupes to one copy, so adopting GdApp under chrome that already stamps the theme is safe by construction.
  • skipTo is opt-in, not defaulted. Passing it is the app asserting "my pages carry this target". The component cannot know that, so it does not guess.
  • One toast outlet per app. The queue is global; every mounted host renders it. If some surface already mounts GdToastHost, pass :toaster="false" here rather than shipping doubles.
  • No tooltip provider — this system's tooltips are self-contained and need no ancestor.
  • No locale provider — there is no locale system to configure, and a provider for a feature that does not exist is scaffolding for fiction.
  • No portal root — overlays here use the native popover top layer, which needs none.
  • When an app-wide concern does arrive, it arrives here. That is the point of having a root: one place where "every app gets this" is true by construction.

API

Props

PropTypeDefault
productstring—

The product name appended to every page title — "Map — GRIDD Code". Omit it and the component leaves the head alone, for an app that manages titles itself.

taglinestring—

The full title for a page that sets none of its own. Only read when `product` is given; defaults to the product name alone. A tagline is a whole title, not a suffix.

skipTostring—

Mount a skip link to this fragment, first in the DOM. Opt-in: whatever it names must exist and take `tabindex="-1"`, and only the app can promise that — a skip link pointing at nothing is a dead control a keyboard user still has to tab through, worse than none.

skipLabelstring—

The skip link's visible text, when "Skip to content" is the wrong words — a map app skips to the map.

toasterbooleantrue

The toast outlet. Turn it off only when something else in the app already mounts `GdToastHost` — two hosts render the same queue twice.

Slots

default

The whole app — typically NuxtLayout around NuxtPage.

Navigate

Esc