humanonlyweb/ui

SSR

Setup needed for server rendering.

Markdown

Kbd

<Kbd> shows ⌘ on Apple devices and Ctrl elsewhere. Nuxt works out which from the request. In Vue, pass it per request:

import { createUi, platformFrom } from "@humanonlyweb/ui";
import { createSSRApp } from "vue";

const app = createSSRApp(App).use(
  createUi({ platform: platformFrom(request.headers.get("user-agent")) }),
);
Copy code

Without it, <Kbd> shows Ctrl until the page has loaded.

If you cache rendered pages, the cached copy keeps the first visitor's platform. Vary the cache on Sec-CH-UA-Platform (or User-Agent), or leave platform out on cached routes so the browser works it out.

Multiple apps

Two Vue apps on one page need different app.config.idPrefix values, so their generated ids don't clash.