@uxfront/layer-ui

@uxfront/layer-ui

The Nuxt layer for the uxfront.com family of homepages. Extend it to build a homepage with the same look, feel and Lighthouse scores as uxfront.com, from the @uxfront/ui components and the @uxfront/scene formations.

Install

pnpm add @uxfront/layer-ui @uxfront/scene

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@uxfront/layer-ui"],
  runtimeConfig: { public: { siteUrl: "https://inkline.io" } },
});

Then build the page from Ux* components (see the @uxfront/ui README or uxfront.com's homepage), and give it a head:

useUxHead({
  title: "Inkline: the UI library for every framework",
  description: "Perfectly designed components, in all seven frameworks.",
  siteName: "Inkline",
  image: { path: "/og.jpg", width: 1200, height: 630, alt: "…" },
  sameAs: ["https://github.com/inkline"],
});

What it adds

• Components and composables. Every @uxfront/ui component (UxSite, UxHero, UxChapter, …) and useExperience() are auto-imported, and v-scramble is registered. Formations are imported explicitly from @uxfront/scene/formations.
• Fonts. Geist, Geist Mono and Instrument Serif, self-hosted by @nuxt/fonts with metric-matched fallbacks.
• useUxHead(options). Title (no title template), description, canonical URL, Open Graph and Twitter cards, Organization structured data, and the dark theme-color and color-scheme. All of it applies to the calling page only. runtimeConfig.public.siteUrl is the origin it builds URLs on.
• A clean critical path. On pages that render UxSite or UxErrorPage, the first frame needs nothing but the prerendered HTML and its inline styles. Once the browser reports the first contentful paint, a small inline loader brings in the app bundle, the web fonts and the entry stylesheet. The scene's engine and shaders are never prefetched: they load once the page is idle.

Sharing an app

The layer changes nothing outside those pages, so a homepage can live in the same app as docs or anything else:

• It ships no app.vue, error.vue, global CSS, route rules or deployment settings.
• The homepage's base styles only apply while a UxSite is on the page.
• Other pages render as Nuxt normally renders them. On a homepage, the app's global stylesheet still loads, just after first paint, so client-side navigation to other pages keeps their styles. It also applies to the homepage then, so keep global CSS from restyling .ux-site.

Site-wide settings stay in the app. uxfront.com's nuxt.config.ts has examples: security headers, immutable caching of /_nuxt/**, and static prerendering for Cloudflare.